安排带按钮的脚手架

Question

我用 flutter 写了这段代码，我想知道我是否可以让它变得更好，我做了很多“工作”，我觉得有更好的方法来编写它。尤其是按钮之间带有展开的按钮，以及尺寸框。

屏幕中间有文字(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

如果您希望这 2 个按钮保留在底部，您可以在脚手架属性中使用 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,
          ),
        ),
      ),

安排带按钮的脚手架

arranging a scaffold with buttons

coding-style

scaffold

flutter

flutter-layout