如何在 Flutter 中对齐小部件内的按钮

Posted 2023-02-23

【中文标题】如何在 Flutter 中对齐小部件内的按钮

【英文标题】：How to align button within a widget in Flutter

【发布时间】：2021-02-06 06:31:55

【问题描述】：

尝试在无需支付开发人员费用的情况下进行一点小改动......我想将按钮与屏幕底部对齐，但我似乎只能将其放置在可滚动文本区域内。它需要显示出来，以便查看者无需滚动即可看到按钮。

这是该页面的代码：

Widget showEveryday2Card() 
    return FlipCard(
      onFlip: () => _sound.playLocal("shuffle.mp3"),
      direction: FlipDirection.HORIZONTAL, // default
      //front: Image.asset('images/cards/24.png'),
      front: Container(
        color: Colors.white,
        child: Align(
          alignment: Alignment.center,
          child: Image.asset('images/cards/24.png'),
        ),
      ),
      back: Container(
        color: Colors.white,
        child: Stack(children: <Widget>[
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: Image.asset('images/cards/cardbacks/back24.png'),
            ),
          ),
          Center(
            child: Container(
              padding: EdgeInsets.only(
                  top: (MediaQuery.of(context).size.height > 800)
                      ? 20
                      : (MediaQuery.of(context).size.height > 700) ? 10 : 0),
              height: 0.5 * MediaQuery.of(context).size.height,
              width: 0.8 * MediaQuery.of(context).size.width,
              child: Center(
                child: CupertinoScrollbar(
                  isAlwaysShown: true,
                  controller: _controller,
                  child: ListView(children: <Widget>[
                    Text(
                      "Scrollable text",
                      style: TextStyle(
                        fontFamily: 'GillSansMT',
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: (MediaQuery.of(context).size.height > 900)
                            ? 30
                            : 14,
                      ),
                    ),
                    new RaisedButton(
                      onPressed: () 
                        Navigator.pop(context);
                        ,
                        child: Text('Go back!'),
                    )
                  ]),
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  

如果您能指出正确的方向，我将不胜感激。

谢谢！

【参考方案1】：

return FlipCard(
  onFlip: () => _sound.playLocal("shuffle.mp3"),
  direction: FlipDirection.HORIZONTAL, // default
  //front: Image.asset('images/cards/24.png'),
  front: Container(
    color: Colors.white,
    child: Align(
      alignment: Alignment.center,
      child: Image.asset('images/cards/24.png'),
    ),
  ),
  back: Container(
    color: Colors.white,
    child: Stack(children: <Widget>[
      Positioned.fill(
        child: Align(
          alignment: Alignment.center,
          child: Image.asset('images/cards/cardbacks/back24.png'),
        ),
      ),
      Center(
        child: Container(
          padding: EdgeInsets.only(
              top: (MediaQuery.of(context).size.height > 800)
                  ? 20
                  : (MediaQuery.of(context).size.height > 700)
                      ? 10
                      : 0),
          height: 0.5 * MediaQuery.of(context).size.height,
          width: 0.8 * MediaQuery.of(context).size.width,
          // Made some changes here
          child: Column(children: [
            Expanded(
              child: CupertinoScrollbar(
                  isAlwaysShown: true,
                  controller: _controller,
                  child: ListView(children: <Widget>[
                    Text("Scrollable text" * 1000,
                        style: TextStyle(
                          fontFamily: 'GillSansMT',
                          fontWeight: FontWeight.normal,
                          color: Colors.black,
                          fontSize:
                              (MediaQuery.of(context).size.height > 900)
                                  ? 30
                                  : 14,
                        ))
                  ])),
            ),
            // SizedBox(height: 10), // Uncomment if you need some space
            RaisedButton(
              onPressed: () 
                Navigator.pop(context);
              ,
              child: Text('Go back!'),
            )
          ]),
        ),
      ),
    ]),
  ),
);

尝试用这段代码替换函数体。