如何在不使用堆栈的情况下对齐小部件的中心和行尾

Question

如何做到这一点

形象

代码

Row(
children: [
SizedBox(width: 33.w),
Text(
StringRes.getStart,
style: TextStyle(
fontWeight: FontWeight.w500,
color: AppColors.backgroundColor,
fontSize: 13.sp,
),
),
Spacer(),
Icon(
Icons.arrow_forward,
color: AppColors.backgroundColor,
),
SizedBox(
width: 3.w,
),
],
),

在不同的设备上得到不同的间距像这张图2图片3

Answer 1

我猜你要找的是这样的东西:

Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
SizedBox(width: 20),
Text('Get started'),
SizedBox(
width: 20,
child: Icon(Icons.arrow_forward),
),
],
),
),

在本例中，Text小部件的居中是通过在它的两侧拥有同样大的SizedBox小部件，并告诉Row小部件使用mainaxisalign . spacebetween。行内容周围的填充是通过padding小部件实现的，因此它不会干扰内容对齐。

我希望这对你有帮助。