这篇文章给大家介绍如何使用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小部件功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
