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

本文主要介绍我为桌面和 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小部件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 超过百万的StackOverflow Flutter 20大问题(推荐)

    今天分享StackOverflow上高访问量的20大问题,这些问题给我一种特别熟悉的感觉,我想你一定或多或少的遇到过,有的问题在stackoverflow上有几十万的阅读量,说明很多人都遇到了这些问题,把这些问题整理分享给大家,每期20个,每隔2周分享一次. 如何实现Android平台的wrap_content 和match_parent 你可以按照如下方式实现: 1.Width = Wrap_content Height=Wrap_content: Wrap( children: <Widge

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

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

    本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面.本教程将展示我如何使用堆栈来使用小部件完成可拖动功能 如下所示. 我们将动态地将项目添加到堆栈中并区分它们,我将使用 RandomColor 类型器.所以我们必须添加那个包. random_color: 然后我们可以创建包含我们的堆栈的 HomeView class HomeView extends StatefulWidget { @override _HomeViewState createS

  • 详解如何在Flutter中用小部件创建响应式布局

    详解如何在Flutter中用小部件创建响应式布局

    目录 前提条件 使用容器的问题 展开式小组件的介绍 灵活小组件的介绍 设置一个示例应用程序 代码执行 扩展的小部件例子 灵活部件的例子 扩大的和灵活的部件之间的区别 总结 构建响应式屏幕布局意味着编写一段代码,以响应设备布局的各种变化,因此应用程序会根据设备的屏幕尺寸和形状显示其UI. 在这篇文章中,我们将探讨Flutter中用于屏幕响应的扩展和灵活部件. 由于Flutter的跨平台.单一代码库的能力,了解屏幕管理以防止像柔性溢出错误或糟糕的用户界面设计这样的问题是至关重要的. 我们还将设计一个

  • Flutter随机迷宫生成和解迷宫小游戏功能的源码

    此博客旨在帮助大家更好的了解图的遍历算法,通过Flutter移动端平台将图的遍历算法运用在迷宫生成和解迷宫上,让算法变成可视化且可以进行交互,最终做成一个可进行随机迷宫生成和解迷宫的APP小游戏.本人是应届毕业生,希望能与大家一起讨论和学习- 注:由于这是本人第一次写博客,难免排版或用词上有所欠缺,请大家多多包涵. 注:如需转载文章,请注明出处,谢谢. 一.项目介绍: 1.概述 项目名:方块迷宫 作者:沫小亮. 编程框架与语言:Flutter&Dart 开发环境:Android Studio 3

  • idea创建springMVC框架和配置小文件的教程图解

    这个框架主要还是思想,之后,,,还是创建项目好了, 1.新建一个项目 新建一个maven,并且选择webapp类型. 2.点击next选项 这里面的两个选项可以随便填,但是Artifactid一般是项目名,第一个可以是自己定义的名称了, 3.继续点next 在这我们可以添加name=archetypeCatalog,internal,可以在创建项目的时候快一点,3.创建好了项目之后就把我创建的一个小案例放上了 1.创建项目的流程01.引入需要的pom文件节点02.web.xml文件中配置核心控制

  • IDEA创建yml文件不显示小树叶创建失败问题的解决方法

    不知道自己干了什么骚操作,在创建yml文件时,出现了以下问题: 这不单单是没有显示小树叶的问题,而是真的没法用,而且是在YAML插件全部安装的情况下出现了这样的问题. 通过一番搜索,现解决方法如下: 打开setting-File Types: 找到Text,在以下列表中找到自己创建的失效的application.yml,点击右边的减号将其删除,应用,问题解决. 附录:SpringBoot项目yml文件 不显示绿色小树叶的问题 方法1: 显示为灰色或者是表格样式的, 1.确认idea是否安装yam

  • Flutter 创建私有公共插件的步骤

    创建package 通过以下命令行创建一个package flutter create --template=package plugins 创建演示代码(可选) 在test文件中,对存dart库进行单元测试,但是在涉及页面等功能,需要有一个demo,需要在工程内部创建一个demo. 如果要发布到公有pub上,需要写上示例代码,方便别人知道如何使用. cd plugins flutter create example 得到的目录结构如下所示: |____CHANGELOG.md |____LIC

  • Android Flutter利用贝塞尔曲线画一个小海豚

    Android Flutter利用贝塞尔曲线画一个小海豚

    目录 前言 效果图 实现步骤 总结 前言 贝塞尔曲线的应用填补了计算机绘制与手绘之前的差距,更能表达人想画出的曲线,为了更好的理解万能的贝塞尔曲线,而海豚是我认为在海洋生物中身体曲线最完美的海洋生物,在海洋中游泳速度最高可达80km/h;比驱逐舰速度还快,学习绘制正好学到了贝塞尔曲线,那么我们今天就用贝塞尔曲线画看看能不能画一只可爱的小海豚呢. 效果图 先上效果图: 实现步骤 path路径绘制贝塞尔曲线的方法非常简单,只需要传入控制点即可,二阶就传1个控制点1个终点,三阶就传2个控制点和1个终点

  • yii 2.0中表单小部件的使用方法示例

    前言 本文主要介绍的是关于yii 2.0中表单小部件使用的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 使用方法 首先创建model层,因为要使用表单小部件 所以要加载相应的组件,这里需要的组件有yii\widgets\ActiveForm yii\helpers\Html 接下来在model定义的class里 写方法,首先我们要定义需要使用表单小部件的name值 不多说上代码 <?php /** * Created by PhpStorm. * User: jinlei * Dat

  • Python基于identicon库创建类似Github上用的头像功能

    本文实例讲述了Python基于identicon库创建类似Github上用的头像功能.分享给大家供大家参考,具体如下: Identicon在很多大型IT网站上可以见到,比如Github,Sourceforge,Stackoveflow等等, 刚刚注册的账号的个人信息的默认图标​都​是​一​些​看​上​去​像​七​巧​板​拼​凑​的​图​案​,​对​称​又​变​化​多​端​. 本​人​也​是​因​为​好​奇​才​在​网​上​搜​了​这​个​算​法​,​主​要​是​哈​希​算​法​,​把​邮​箱​或

  • Android编程之桌面小部件AppWidgetProvider用法示例

    本文实例讲述了Android编程之桌面小部件AppWidgetProvider用法.分享给大家供大家参考,具体如下: /** * 桌面小部件 AppWidget配置 * * @description: * @author ldm * @date 2016-5-16 下午1:57:16 */ public class ExampleAppWidgetConfigure extends Activity { static final String TAG = "ExampleAppWidgetCon

随机推荐