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

Question

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

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

这是我能想到的

这是我的Build函数代码

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