【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

相关推荐
alexhilton2 小时前
务实的模块化:连接模块(wiring modules)的妙用
android·kotlin·android jetpack
AiFlutter2 小时前
二、页面布局(10):瀑布流布局
flutter·低代码·低代码平台·aiflutter·aiflutter 低代码·flutter低代码开发·低代码app开发
ji_shuke3 小时前
opencv-mobile 和 ncnn-android 环境配置
android·前端·javascript·人工智能·opencv
前端程序猿之路3 小时前
基于扣子(Coze)工作流 API 的微信小程序开发实践总结
前端·微信小程序·小程序·大模型·api·ai编程·扣子
崔庆才丨静觅4 小时前
Producer Audios Generation API 对接说明
api
sunnyday04265 小时前
Spring Boot 项目中使用 Dynamic Datasource 实现多数据源管理
android·spring boot·后端
幽络源小助理6 小时前
下载安装AndroidStudio配置Gradle运行第一个kotlin程序
android·开发语言·kotlin
inBuilder低代码平台6 小时前
浅谈安卓Webview从初级到高级应用
android·java·webview
豌豆学姐6 小时前
Sora2 短剧视频创作中如何保持人物一致性?角色创建接口教程
android·java·aigc·php·音视频·uniapp
崔庆才丨静觅6 小时前
SeeDance Videos Generation API 对接说明
api