使用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小部件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • echarts加载区域地图并标注点的简单步骤

    echarts加载区域地图并标注点的简单步骤

    这篇文章提供了南海区域地图加载以及气象站点标注的详细步骤,首先通过DataV.GeoAtlas地理小工具下载南海区域的JSON地图文件,接着使用Echarts进行地图的展示,可以选择是否显示省下所有市的名字,需要的朋友可以参考下
    2024-09-09
  • 微信小程序按顺序同步执行的两种方式

    微信小程序按顺序同步执行的两种方式

    这篇文章主要介绍了微信小程序按顺序同步执行的两种方式,本文通过实例代码给大家讲解,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • js闭包实现按秒计数

    js闭包实现按秒计数

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。
    2015-04-04
  • 网页实时显示服务器时间和javscript自运行时钟

    网页实时显示服务器时间和javscript自运行时钟

    如果每秒通过ajax加载服务器时间的话,就会产生大量的请求,于是打算使用js 来解决这个需求
    2014-06-06
  • 你知道JavaScript Symbol类型怎么用吗

    你知道JavaScript Symbol类型怎么用吗

    这篇文章主要介绍了你知道JavaScript Symbol类型怎么用吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • javascript实用小函数使用介绍

    javascript实用小函数使用介绍

    本文整理了一些实用小函数如阻止输入非数字,backspace除外;限制输入最大字符串长度等,需要的朋友可以了解下
    2013-11-11
  • Javascript new关键字的玄机 以及其它

    Javascript new关键字的玄机 以及其它

    本人是Javascript菜鸟,下面是前几天学习Javascript的旅程心得,希望对和我一样的入门者有点用,也希望高手批评指正。
    2010-08-08
  • 如何利用Typescript封装本地存储

    如何利用Typescript封装本地存储

    这篇文章主要给大家介绍了关于如何利用Typescript封装本地存储的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • javascript判断数组内是否重复的方法

    javascript判断数组内是否重复的方法

    这篇文章主要介绍了javascript判断数组内是否重复的方法,涉及javascript针对数组的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 一种新的javascript对象创建方式Object.create()

    一种新的javascript对象创建方式Object.create()

    这篇文章主要介绍了一种新的javascript对象创建方式Object.create(),感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论