向Row()中的小部件添加具有特定宽度的间距的最有效方法是什么?

我使用Expanded()告诉“行”中的小部件使用可用空间。我想在行中的元素之间留出4px的间距。我不希望对Row外的元素使用相同的空间。鉴于Flutter不支持否定填充,因此我无法以使第一个项目没有左侧填充和最后一个项目没有右侧填充的方式添加填充。

是否存在可以轻松定义特定宽度的模式?我想要一个可以与任意数量的小部件一起使用的解决方案。对于4个小部件,我需要能够产生以下效果的东西:

Row(children: [
    Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8, 0),
        child: Expanded(Text("Alice"))),
    Padding(
        padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
        child: Expanded(Text("Alice"))),
    Padding(
        padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
        child: Expanded(Text("Alice"))),
    Padding(
        padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
        child: Expanded(Text("Alice")))
]);
评论
花=有毒=
花=有毒=

Use SizedBox widget very easy and simple check it here

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

  SizedBox(
  width: 200.0,
  height: 300.0,
)
点赞
评论
wrerum
wrerum

我通常使用这个:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    BottomBarItem(iconData: AppIcons.location, title: AppStrings.location),
    Spacer(),
    BottomBarItem(iconData: AppIcons.home, title: AppStrings.homePage),
    BottomBarItem(iconData: AppIcons.settings, title: AppStrings.settings),
    ],
  ),

Spacer, a widget that takes up space proportional to it's flex value. Flutter Row Class

mainAxisAlignment property : How the children should be placed along the main axis. Flutter MainAxisAlignment enum

If you want to determine the size, you can use SizedBox(width: double) instead of Spacer ().

点赞
评论