布置带扣子的脚手架

Question

我写了这段代码，我想知道我是否能让它更好，我做了很多“工作”，我觉得有更好的方法来写它。特别是在它们之间展开的按钮和大小箱。

屏幕中间有文本(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'),
          ),
        ],
      ),
    ],
  ),
);

Answer 1

如果希望这两个按钮留在底部，可以在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,
          ),
        ),
      ),