如何在 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 来实现这一点。我把Texts 都放在里面了。

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