本文主要介紹我為桌面和 Web 設計的一個超級祕密 Flutter 專案使用了畫布和可拖動節點介面。本教程將展示我如何使用堆疊來使用小部件完成可拖動功能

如下所示。

我們將動態地將專案新增到堆疊中並區分它們，我將使用 RandomColor 型別器。所以我們必須新增那個包。

random_color:

然後我們可以建立包含我們的堆疊的 HomeView

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

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

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

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

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

  @override
  void inihttp://www.cppcns.com
 
tState() {
    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 中的浮動操作按鈕來實現。

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

就是這樣。現在您的檢視上有一個可移動的Stack。

到此這篇關於flutter建立可移動的stack小部件的文章就介紹到這了,更多相關flutter stack小部件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！