如何相对于Flutter中的其他小部件特定地放置小部件

Question

我刚开始使用Flutter，由于我在版图设计上很薄弱，所以这种特殊的设计困扰着我我不确定如何实现我在下面发布的这种特殊设计。

我可以使按钮位于左下角和右下角，但是使用Stack（）时，文本只是彼此重叠。

这是我能想到的

这是我的构建功能代码

@override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Text(
                'Press the button'
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Text(
                '$_counter'
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: FloatingActionButton(
              onPressed: _decrementCounter,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          )
        ],
      )
      // Center is a layout widget. It takes a single child and positions it
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 1

您应该使用Column来实现。我把两个Text都放进了里面。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('title')),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Press the button'),
                Text('1'),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: FloatingActionButton(
              onPressed: null,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: null,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          )
        ],
      ),
    );
  }