Flutter让按钮填充满所在container

最新推荐文章于 2026-06-21 13:45:14 发布

原创最新推荐文章于 2026-06-21 13:45:14 发布 · 805 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Flutter

博客介绍了在Dart里，使用FlatButton时遇到文本对齐问题的解决办法。直接用text会使文本居中，且无法用textAlign修改为左对齐，因此改用row实现，在FlatButton的child中嵌套container来实现文本左对齐。

反例:

Container(
              alignment: Alignment.topLeft,
              // padding: EdgeInsets.all(1),
              // margin:new EdgeInsets.only(right:1.0),
              decoration: BoxDecoration(
                color: Colors.green,
                //每条列表项底部加一个边框
                border: Border(
                    bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))),
              ),
              child: FlatButton(
                // padding: new EdgeInsets.only(right: 200),
                color: Colors.blueGrey,
                child: Text(
                  "A. ${Provider.of<GetData>(context).answerA}",
                  style: TextStyle(fontSize: 22.0, color: Colors.white),
                ),
                onPressed: () {
                 
                },
              ),
            ),

image.png

改用row实现代码:

Row(
              children: <Widget>[
                Expanded(
                  child: FlatButton(
                    color: Colors.blueGrey,
                    child: Container(
                      alignment: Alignment.topLeft,
                      child: Text(
                        "A. ${Provider.of<GetData>(context).answerA}",
                        style: TextStyle(fontSize: 22.0, color: Colors.white),
                        textAlign: TextAlign.start,
                        maxLines: 1,
                      ),
                    ),
                    onPressed: () {
                      
                    },
                  ),
                )
              ],
            ),