使用flutter創(chuàng)建可移動的stack小部件功能

更新時間：2021年10月09日 16:14:39 作者：Lucklyの博客

本文主要介紹我為桌面和 Web 設(shè)計的一個超級秘密 Flutter 項目使用了畫布和可拖動節(jié)點界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動功能,需要的朋友可以參考下

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

如下所示。

可拖動小部件示例抖動

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

random_color:

然后我們可以創(chuàng)建包含我們的堆棧的 HomeView

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  List<Widget> movableItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: movableItems,
        ));
  }
}

功能非常簡單。我們將有一個MoveableStackItem有狀態(tài)的小部件。它會跟蹤自己的位置和顏色。顏色在初始化時設(shè)置，位置通過更新GestureDetector。

class _MoveableStackItemState extends State<MoveableStackItem> {
  double xPosition = 0;
  double yPosition = 0;
  Color color;

  @override
  void initState() {
    color = RandomColor().randomColor();
    super.initState();
  }

  @override
  Widget 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 中的浮動操作按鈕來實現(xiàn)。

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

就是這樣?，F(xiàn)在您的視圖上有一個可移動的Stack。

到此這篇關(guān)于flutter創(chuàng)建可移動的stack小部件的文章就介紹到這了,更多相關(guān)flutter stack小部件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: