Question

我目前正在制作一张卡片，要求该标签位于底部。但是我尝试了许多类似脚手架的方法，但仍然无法将其放在底部。

                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(color: Color(0xF6F6F6F6))),
                          ),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Container(
                                  height: 30,
                                  child: FlatButton.icon(
                                    color: Colors.white,
                                    icon: Icon(Icons.bookmark_border,
                                        size: 18, color: Colors.black38),
                                    label: Text('Bookmark',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.black54)),
                                    onPressed: () {},
                                  ),
                                ),
                                Container(
                                  height: 30,
                                  child: FlatButton.icon(
                                    color: Colors.white,
                                    icon: Icon(Icons.share,
                                        size: 18, color: Colors.black38),
                                    label: Text('Share',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.black54)),
                                    onPressed: () {},
                                  ),
                                )
                              ])),
                      )],

Screenshot

Answer 1

尝试将crossAxisAlignment: CrossAxisAlignment.end添加到该行。

希望有帮助。

Answer 2

没有更多信息，我不确定我的建议是否会奏效。但是，您可以将 Stack 小部件与 Align 结合使用以实现所需的功能。带有示例的堆栈docs，请查看有关indexed stacks的本文。

Answer 3

您可以将行放在列中，在行上方，您可以将展开包装小部件。在这种情况下，我使用了一个容器，并将颜色设置为橙色。

class BarStaysDown extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.orange,
              ),
            ),
            Container(
              color: Colors.white,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      height: 30,
                      child: FlatButton.icon(
                        color: Colors.white,
                        icon: Icon(Icons.bookmark_border,
                            size: 18, color: Colors.black38),
                        label: Text('Bookmark',
                            style:
                                TextStyle(fontSize: 13, color: Colors.black54)),
                        onPressed: () {},
                      ),
                    ),
                    Container(
                      height: 30,
                      child: FlatButton.icon(
                        color: Colors.white,
                        icon: Icon(Icons.share, size: 18, color: Colors.black38),
                        label: Text('Share',
                            style:
                                TextStyle(fontSize: 13, color: Colors.black54)),
                        onPressed: () {},
                      ),
                    )
                  ]
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出：

颤抖如何使行停留在底部

3 个答案: