纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

flutter stack小部件 使用flutter创建可移动的stack小部件功能

Lucklyの博客   2021-10-09 我要评论
想了解使用flutter创建可移动的stack小部件功能的相关内容吗,Lucklyの博客在本文为您仔细讲解flutter stack小部件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:flutter,stack小部件,flutter,小部件,下面大家一起来学习吧。

本文主要介绍我为桌面和 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) {
    return Scaffold(
        body: Stack(
          children: movableItems,
        ));
  }
}

功能非常简单。我们将有一个MoveableStackItem有状态的小部件。它会跟踪自己的位置和颜色。颜色在初始化时设置,位置通过 更新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 中的浮动操作按钮来实现。

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

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


相关文章

猜您喜欢

  • Vue监听数据的原理 Vue监听数据的原理详解

    想了解Vue监听数据的原理详解的相关内容吗,黑猫几绛在本文为您仔细讲解Vue监听数据的原理的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue数据监听,数据监听原理,下面大家一起来学习吧。..
  • Java intern方法 Java字符串的intern方法有何奥妙之处

    想了解Java字符串的intern方法有何奥妙之处的相关内容吗,吾日三省贾斯汀在本文为您仔细讲解Java intern方法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,intern方法,Java,String,intern(),下面大家一起来学习吧。..

网友评论

Copyright 2020 www.3a4a5a.com 【3A软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式