【Flutter&Dart】 拖动改变 widget 的窗口尺寸大小GestureDetector~简单实现(10 /100)

上效果

预期的是通过拖动一条边界线改变窗口大小,类似vscode里拖动效果。这个是简单的拖动实现

上代码:

dart 复制代码
import 'package:flutter/material.dart';

class MyDraggableViewDemo extends StatelessWidget {
  const MyDraggableViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyDraggableViewDemo'),
        ),
        body: DraggableDemo(),
      ),
    );
  }
}

class DraggableDemo extends StatefulWidget {
  const DraggableDemo({super.key});

  @override
  State<StatefulWidget> createState() {
    return _DraggableDemoState();
  }
}

class _DraggableDemoState extends State<DraggableDemo> {
  double width = 200.0;
  double height = 200.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            width = width + details.delta.dx;
            height = height + details.delta.dy;
          });
        },
        child: Container(
          width: width,
          height: height,
          
          color: Colors.blue,
          child: Center(
            child: Text(
              '点击 拖动后改变窗口大小',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

所以预期的边界线效果,应该是对边界线进行处理,然后和关联的 widget 进行联动,

下一篇见

======End

相关推荐
阅文作家助手开发团队_山神1 小时前
第三章: 解决Android iPad蓝牙键盘联想词UI不跟随光标问题
flutter
阅文作家助手开发团队_山神1 小时前
第四章:Flutter自定义Engine本地依赖与打包流程
前端·flutter
程序员老刘2 小时前
Flutter 3.35 更新要点解析
flutter·ai编程·客户端
一条上岸小咸鱼3 小时前
Kotlin 基本数据类型(一):Numbers
android·前端·kotlin
Huntto3 小时前
最小二乘法计算触摸事件速度
android·最小二乘法·触摸事件·速度估计
一笑的小酒馆3 小时前
Android中使用Compose实现各种样式Dialog
android
红橙Darren4 小时前
手写操作系统 - 编译链接与运行
android·ios·客户端
阅文作家助手开发团队_山神4 小时前
第一章: Mac Flutter Engine开发准备工作
前端·flutter
EmmaGuo20155 小时前
flutter3.7.12版本设置TextField的contextMenuBuilder的文字颜色
前端·flutter
鹏多多.7 小时前
flutter-使用device_info_plus获取手机设备信息完整指南
android·前端·flutter·ios·数据分析·前端框架