用按钮布置脚手架答案

【问题标题】：arranging a scaffold with buttons用按钮布置脚手架
【发布时间】：2021-06-11 05:49:51
【问题描述】：

我用颤振写了这段代码，我想知道我是否可以让它变得更好，我做了很多“变通”，我觉得有更好的方法来写它。尤其是在它们之间展开的按钮和大小框。

屏幕中间有文字（getVerse），还有两个按钮，一个在左下角，一个在右下角。

第一个展开将文本与按钮分开，第二个展开将两个按钮分开

感谢您的帮助并感谢您的宝贵时间。

Scaffold(
  appBar: AppBar(
    title: Text(
      suras.elementAt(widget.index),
      textAlign: TextAlign.right,
    ),
  ),
  body: Column(
    children: [
      SizedBox(
        height: 100,
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          getVerse(widget.index + 1, currentVerse),
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 24,
            fontFamily: 'KFGQPC BAZZI Uthmanic Script',
          ),
        ),
      ),
      Expanded(child: Container()),
      Row(
        children: [
          ElevatedButton(
            onPressed: () {
              setState(() {
                currentVerse++;
              });
            },
            child: Text('not sure'),
          ),
          Expanded(child: Container()),
          ElevatedButton(
            onPressed: null,
            child: Text('sure'),
          ),
        ],
      ),
    ],
  ),
);

【问题讨论】：

你想达到什么目的？
屏幕中间有文字（getVerse），还有两个按钮，一个在左下角，一个在右下角

标签： flutter coding-style flutter-layout scaffold

【解决方案1】：

如果您希望这 2 个按钮留在底部，您可以在 Scaffold 属性中使用 floatingActionButton。您可以使用 floatingActionButtonLocation 更改这些按钮的位置。

 Scaffold(
        appBar: AppBar(
          title: Text('MyApp'),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text('Not sure'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Sure'),
            )
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            'My Text',
            textAlign: TextAlign.center,
          ),
        ),
      ),

【讨论】：