创建两个相互独立的小组件

Question

我不知道我是否遗漏了什么，但在Flutter中，我想装箱两个可以相互独立移动的小部件。

我目前的代码是这样的。

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],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

这将创建一些看起来像这样的东西

我想做的是选择这些小部件在屏幕上的位置，相互独立。例如，如果我想在文本和按钮之间有一个间隙，或者按钮偏离一边。

我是否需要创建两个单独的函数来返回 Widget?

Answer 1

要在你的widgets之间添加空间，你可以用Padding()widget包裹它们。然而，如果你想在屏幕上的任何地方独立地处理你的widget，你可以用堆栈widget包裹它们，并使用Positionned()widget来设置它们的constrainst。