本文主要介紹我為桌面和 Web 設(shè)計(jì)的一個(gè)超級(jí)秘密 Flutter 項(xiàng)目使用了畫布和可拖動(dòng)節(jié)點(diǎn)界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動(dòng)功能

如下所示。

我們將動(dòng)態(tài)地將項(xiàng)目添加到堆棧中并區(qū)分它們，我將使用 RandomColor 類型器。所以我們必須添加那個(gè)包。

random_color:

然后我們可以創(chuàng)建包含我們的堆棧的 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,));} }

功能非常簡單。我們將有一個(gè)MoveableStackItem有狀態(tài)的小部件。它會(huì)跟蹤自己的位置和顏色。顏色在初始化時(shí)設(shè)置，位置通過 更新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視圖添加一個(gè)新的。我們將通過 HomeView 中的浮動(dòng)操作按鈕來實(shí)現(xiàn)。

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

就是這樣。現(xiàn)在您的視圖上有一個(gè)可移動(dòng)的Stack。

總結(jié)

以上是生活随笔為你收集整理的flutter创建可移动的stack小部件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。