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

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

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

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

如下所示。

可拖動(dòng)小部件示例抖動(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 = [];

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

功能非常簡(jiǎn)單。我們將有一個(gè)MoveableStackItem有狀態(tài)的小部件。它會(huì)跟蹤自己的位置和顏色。顏色在初始化時(shí)設(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視圖添加一個(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。

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

您可能感興趣的文章:

超過百萬的StackOverflow Flutter 20大問題(推薦)

相關(guān)文章

echarts加載區(qū)域地圖并標(biāo)注點(diǎn)的簡(jiǎn)單步驟
這篇文章提供了南海區(qū)域地圖加載以及氣象站點(diǎn)標(biāo)注的詳細(xì)步驟,首先通過DataV.GeoAtlas地理小工具下載南海區(qū)域的JSON地圖文件,接著使用Echarts進(jìn)行地圖的展示,可以選擇是否顯示省下所有市的名字,需要的朋友可以參考下
2024-09-09
微信小程序按順序同步執(zhí)行的兩種方式
這篇文章主要介紹了微信小程序按順序同步執(zhí)行的兩種方式,本文通過實(shí)例代碼給大家講解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
js閉包實(shí)現(xiàn)按秒計(jì)數(shù)
閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。相信很少有人能直接看懂這句話，因?yàn)樗枋龅奶珜W(xué)術(shù)。其實(shí)這句話通俗的來說就是：JavaScript中所有的function都是一個(gè)閉包。
2015-04-04
網(wǎng)頁實(shí)時(shí)顯示服務(wù)器時(shí)間和javscript自運(yùn)行時(shí)鐘
如果每秒通過ajax加載服務(wù)器時(shí)間的話，就會(huì)產(chǎn)生大量的請(qǐng)求，于是打算使用js 來解決這個(gè)需求
2014-06-06
你知道JavaScript Symbol類型怎么用嗎
這篇文章主要介紹了你知道JavaScript Symbol類型怎么用嗎，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
javascript實(shí)用小函數(shù)使用介紹
本文整理了一些實(shí)用小函數(shù)如阻止輸入非數(shù)字，backspace除外；限制輸入最大字符串長度等，需要的朋友可以了解下
2013-11-11
Javascript new關(guān)鍵字的玄機(jī) 以及其它
本人是Javascript菜鳥，下面是前幾天學(xué)習(xí)Javascript的旅程心得，希望對(duì)和我一樣的入門者有點(diǎn)用，也希望高手批評(píng)指正。
2010-08-08
如何利用Typescript封裝本地存儲(chǔ)
這篇文章主要給大家介紹了關(guān)于如何利用Typescript封裝本地存儲(chǔ)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-01-01
javascript判斷數(shù)組內(nèi)是否重復(fù)的方法
這篇文章主要介紹了javascript判斷數(shù)組內(nèi)是否重復(fù)的方法,涉及javascript針對(duì)數(shù)組的相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
一種新的javascript對(duì)象創(chuàng)建方式Object.create()
這篇文章主要介紹了一種新的javascript對(duì)象創(chuàng)建方式Object.create()，感興趣的小伙伴們可以參考一下
2015-12-12