【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

相关推荐
Mandy的名字被占用了1 小时前
Dart 与 Flutter 快速入门指南
后端·flutter·dart
2601_956865773 小时前
# 2026年AI API中转平台选型指南:高并发能力、协议兼容与白盒计费体系深度解析
人工智能·api
QiLinkOS3 小时前
QiLink OS的失败数据共享平台的运作模式是否适用于所有行业?
android·开发语言·人工智能·算法·重构·开源
杉氧3 小时前
Framework 补完计划 (2):BufferQueue 与 SurfaceFlinger —— 像素的跨进程“接力赛”
android·架构·android jetpack
牢七3 小时前
RCE?复现成功
android
一化十4 小时前
Android16 自定义全局手势 任意界面依次点击屏幕四个角返回Home界面
android
心中有国也有家5 小时前
Flutter 鸿蒙编译与构建流程深度解析
学习·flutter·华为·harmonyos
三少爷的鞋5 小时前
Android 面试系列:Kotlin 协程的 delay 到底发生在哪个线程?
android
VIP_CQCRE6 小时前
用 Ace Data Cloud 快速接入 Sora 2 API:把视频生成变成可落地的业务能力
api·ai视频·sora·ace data cloud
VIP_CQCRE14 小时前
用 Ace Data Cloud 快速接入 OpenAI 图像生成 API:GPT-Image-2 与 Nano Banana 统一调用
ai·openai·api·ace data cloud·image generation