Flutter中如何实现Row组件首个子元素左对齐、第二个右对齐?
实现Flutter Row内子元素左右两端对齐
要让第一个子元素左对齐、第二个子元素右对齐,直接把外层Row的mainAxisAlignment从spaceEvenly改成MainAxisAlignment.spaceBetween即可。
spaceEvenly会把Row的水平空间均匀分配给每个子元素的前后间隙,导致两个子元素往中间靠拢;而spaceBetween会把所有剩余空间放在两个子元素之间,刚好实现一端左、一端右的对齐效果。
修改后的代码:
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text("label here"), Row( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.star, color: Colors.amber[500]), Icon(Icons.star, color: Colors.amber[500]), Icon(Icons.star, color: Colors.amber[500]), Icon(Icons.star, color: Colors.amber[500]), ], ), ], ),
注意:确保外层Row的父容器是充满可用水平宽度的(比如包裹在Expanded里,或者父容器本身占满屏幕宽度),否则Row没有足够空间分配,对齐效果不会显现。
内容的提问来源于stack exchange,提问作者StripyTiger
相关产品推荐
相关产品推荐

