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

 更新时间:2021年10月09日 16:14:39   作者:Lucklyの博客  
本文主要介绍我为桌面和 Web 设计的一个超级秘密 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。

到此这篇关于flutter创建可移动的stack小部件的文章就介绍到这了,更多相关flutter stack小部件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS 中的 Event Loop 是什么你真的懂

    JS 中的 Event Loop 是什么你真的懂

    Event Loop,简单翻译就是 事件循环,是 JS 语言下实现运行时的一个机制,这篇文章主要介绍了JS 中的 Event Loop 的基本知识,需要的朋友可以参考下
    2022-06-06
  • JavaScript Canvas编写炫彩的网页时钟

    JavaScript Canvas编写炫彩的网页时钟

    这篇文章主要为大家详细介绍了JavaScript Canvas编写炫彩的网页时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 原生Js 实现的简单无缝滚动轮播图的示例代码

    原生Js 实现的简单无缝滚动轮播图的示例代码

    这篇文章主要介绍了原生Js 实现的简单无缝滚动轮播图的示例代码,帮助大家更好的理解喝学习使用js,感兴趣的朋友可以了解下
    2021-05-05
  • 一文掌握new Date() 方法

    一文掌握new Date() 方法

    大家平时在开发的时候有没被new Date()折磨过,反正我是踩过很多坑,今天小编通过本文给大家详细讲解下new date()方法应用思考,感兴趣的朋友一起看看吧
    2023-04-04
  • 详解如何消除axios拦截中的if

    详解如何消除axios拦截中的if

    在使用vue的开发中,我们会使用axios来做前后端通信,那这时候我们就需要对请求前后做拦截,下面这篇文章主要给大家介绍了关于如何消除axios拦截中if的相关资料,需要的朋友可以参考下
    2022-04-04
  • 浅谈javascript属性onresize

    浅谈javascript属性onresize

    这篇文章主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • javasript实现密码的隐藏与显示

    javasript实现密码的隐藏与显示

    用户输入密码时都是显示的星号了,那么我们希望查看明文要怎么查看呢,下面我们只要使用一段简单的js就可以实现查看密码框的明文了,有需要的小伙伴可以来参考下。
    2015-05-05
  • 关于ExtJS4.1:快捷键支持的问题

    关于ExtJS4.1:快捷键支持的问题

    本篇文章小编为大家介绍,关于ExtJS4.1 快捷键支持的问题。需要的朋友参考下
    2013-04-04
  • 一个js的tab切换效果代码[代码分离]

    一个js的tab切换效果代码[代码分离]

    看了此文(YUI实现的Tab 切换),有感而发,写了一个tab切换的函数,做学习之用。原生js实现,因为框架不好玩。
    2010-04-04
  • 原生js实现九宫格拖拽换位

    原生js实现九宫格拖拽换位

    这篇文章主要为大家详细介绍了原生js实现九宫格拖拽换位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论