flutter创建可移动的stack小部件

本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能

如下所示。

我们将动态地将项目添加到堆栈中并区分它们，我将使用 RandomColor 类型器。所以我们必须添加那个包。

random_color:

然后我们可以创建包含我们的堆栈的 HomeView

class HomeView extends StatefulWidget {@override_HomeViewState createState() => _HomeViewState();
}class _HomeViewState extends State<HomeView> {List<Widget> movableItems = [];@overrideWidget build(BuildContext context) {return Scaffold(body: Stack(children: movableItems,));}
}

功能非常简单。我们将有一个MoveableStackItem有状态的小部件。它会跟踪自己的位置和颜色。颜色在初始化时设置，位置通过更新GestureDetector。

class _MoveableStackItemState extends State<MoveableStackItem> {double xPosition = 0;double yPosition = 0;Color color;@overridevoid initState() {color = RandomColor().randomColor();super.initState();}@overrideWidget build(BuildContext context) {return Positioned(top: yPosition,left: xPosition,child: GestureDetector(onPanUpdate: (tapInfo) {setState(() {xPosition += tapInfo.delta.dx;yPosition += tapInfo.delta.dy;});},child: Container(width: 150,height: 150,color: color,),),);}
}

最后要做的是向MoveableStackItem视图添加一个新的。我们将通过 HomeView 中的浮动操作按钮来实现。

 return Scaffold(floatingActionButton: FloatingActionButton(onPressed: () {setState(() {movableItems.add(MoveableStackItem());});},),body: Stack(children: movableItems,));

就是这样。现在您的视图上有一个可移动的Stack。

flutter创建可移动的stack小部件相关推荐

wordpress创建_十分钟即可在WordPress中创建动态小部件
wordpress创建 Have you tried to find functionality for a specific purpose in WordPress but failed to f ...
变分模态分解_Android小部件示例中的模态对话框（弹出）
变分模态分解在此示例中,我们将看到如何在主屏幕中创建一个可以打开弹出对话框的Android小部件. 如您所知,Android Widgets是小型应用程序,基本上可以做两件事. 按下时启动新的活动, ...
Android应用小工具（窗口小部件）
Widget是可以在其他应用程序被嵌入和接收定期更新的微型应用程序视图. 在创建一个应用程序窗口小部件,需要满足以下条件: AppWidgetProviderInfo--描述元数据为应用窗口小部件,如 ...
Android AppWidget（桌面小部件）
使用Android Studio 开发桌面小部件,闲来无事,自己动手做一个 AppWidget是应用程序窗口小部件(Widget)是微型的应用程序视图官方文档链接:http://www.androi ...
如何在Android的主屏幕上添加设置快捷方式小部件
You probably have some settings that you access on a regular basis. Instead of going into the Settin ...
[flutter专题]详解AppBar小部件
大家好,我是坚果,公众号"坚果前端" AppBar 应用栏是各种应用程序中最常用的组件之一.它可用于容纳搜索字段.以及在页面之间导航的按钮,或者只是页面标题.由于它是一个如此常用的 ...
wxWidgets：创建自定义小部件
wxWidgets:创建自定义小部件编写自定义小部件编写通用小部件编写本机小部件通常在 wxDialogs 和 wxFrames 中结合现有的Controls控件就足以完成任何 GUI 设计. ...
OpenCV创建小部件Creating Widgets
OpenCV创建小部件创建小部件目标代码解释结果创建小部件目标在本教程中,您将学习如何使用WidgetAccessor和VTK创建自己的窗口小部件. 在可视化窗口中显示您的窗口小部件 ...
创建自定义Widgets小部件扩展
创建自定义Widgets小部件扩展创建自定义Widgets小部件扩展扩展名类型创建一个扩展向Qt Designer公开扩展创建扩展工厂访问Qt Designer的扩展管理器创建自定义Wi ...

flutter创建可移动的stack小部件

flutter创建可移动的stack小部件相关推荐

最新文章

热门文章