Text和Image在Row里面对齐的坑

最新推荐文章于 2024-01-31 18:18:55 发布

卷起来了啊

最新推荐文章于 2024-01-31 18:18:55 发布

阅读量1k

点赞数

分类专栏： Flutter 文章标签： ar

本文链接：https://blog.csdn.net/m0_37670495/article/details/120967169

版权

Flutter 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Flutter中如何通过调整Container组件的margin、padding、child排列及BoxDecoration实现内容的垂直居中和样式定制。重点讲解了height属性在文字垂直居中中的作用，以及装饰盒模型的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Container(
                  margin: EdgeInsets.only(top: 4),
                  padding: EdgeInsets.fromLTRB(12, 3, 7, 3),
                  child: Row(
                    children: [
                      Text("營業中",
                          style: TextStyle(
                              height: 1.4,
                              fontSize: 12,
                              textBaseline: TextBaseline.alphabetic,
                              color: Color(0XFFFA6C17),
                              fontWeight: FontWeight.bold),
                          textAlign: TextAlign.center,
                          maxLines: 1,
                          textDirection: TextDirection.ltr),
                      Image.asset(
                        "assets/images/public/icon_system_arrow_mini_right.png",
                        width: 16,
                        height: 16,
                      )
                    ],
                  ),
                  decoration: BoxDecoration(
                    color: Color(0xfffef0e8),
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                  ),
                ),

假如不加height属性文字始终不能垂直居中，设置height就好了，这个属性的意思是行高，不要设置太大，他会乘以fontSize得出的结果才是行高，目前暂时知道这种方法可以垂直居中。