【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

相关推荐
aqi001 小时前
鸿蒙版本的电子书阅读APP开放源码啦
android·华为·ai编程·harmonyos·鸿蒙
墨天梦1 小时前
B19_SunnyWeather到阅读客户端
android·kotlin
美狐美颜sdk2 小时前
直播APP源码可以直接接入视频美颜sdk吗?技术方案详解
android·人工智能·音视频·美颜sdk·直播美颜sdk
yuanlaile4 小时前
2026年全新Flutter 跨平台开发全栈学习资料整理
flutter·getx·鸿蒙 next·flutter开发鸿蒙·flutter入门实战·flutter全栈
VIP_CQCRE4 小时前
Nano Banana 图像 API:角色一致性、修图与商品图,一次接入怎么做?
api·ai绘图·图像生成·nano banana·ace data cloud
用户69371750013845 小时前
2026,程序员的时代拐点到了
android·前端·后端
浪潮IT馆7 小时前
Android Studio 非最新版本下载安装教程
android·ide·android studio
xiaozongt19898 小时前
MasterGo + Claude Code 生成 Android 布局:完整实践指南
android
Anhty9 小时前
2026最新免费手机音频处理工具 !!
android·功能测试·ios·智能手机·音视频
VIP_CQCRE10 小时前
Visual Studio 接入 AI 助手:LMLocal × Ace Data Cloud 配置指南
大模型·api·ai编程·visual studio·acedatacloud