创建两个彼此独立的小部件

Question

我不确定在这里是否缺少任何内容，但是在Flutter中，我想创建两个可以彼此独立移动的小部件。

我当前的代码是这样：

System.Threading.Thread.Sleep(1000)

这将创建如下所示的内容：

我想做的是选择这些小部件在屏幕上的位置，彼此独立。例如，如果我想在文本和按钮之间留一个间隙，或者将按钮移到一侧。

我需要创建两个单独的函数来返回class SurpriseReveal extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: double.infinity, margin: EdgeInsets.all(10), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( "Hi", style: TextStyle(fontSize: 20, color: Colors.pink[700]), textAlign: TextAlign.center, ), InkWell( onTap: null, splashColor: Colors.pink[900], child: Container( // set your desired height here height: 150, // set your desired width here width: 150, // decoration property gives it a color and makes it round like a floating action button decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.pink[300], ), // add your desired padding here padding: const EdgeInsets.symmetric(vertical: 10.0), // add the child element child: Center( child: Text( 'Hi', // style of the text textAlign: TextAlign.center, style: TextStyle( fontSize: 22.0, color: Colors.pink[900], ), ), ), ), ), ], ), ); } } 吗？

Answer 1

要在小部件之间增加空间，可以用Padding（）小部件将它们包装起来。但是，如果您希望独立地将小部件放置在屏幕上的任何位置，请将它们包装在堆栈小部件中，然后使用Positionned（）小部件设置其约束。