Flutter：将行小部件中的特定子项居中对齐答案

【问题标题】：Flutter : align center a specific child in a Row WidgetFlutter：将行小部件中的特定子项居中对齐
【发布时间】：2023-01-26 18:41:00
【问题描述】：

我是 flutter 的新手，我正在尝试编写 UI Instagram 克隆代码，如何将轮播指示器与 Row() 父类对齐到中心 this

Stack(
 alignment: Alignment.center,
children:[
buildIndicator(),
//Icon section
Row(
children:[
buildLeftIcons(),
buildRightIcon(),
],
),
],
),

结果我得到： ![final result][this]

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

嘿，您可以在图标和行中的点之间使用 Spacer() children 。 Spacer 小部件自动采用额外的宽度，如下所示 -

Row(
  children: [
     Icon(),   
     Icon(),   
     Icon(),  
     Spacer(),
     DotsIndicator(),
     Spacer(), 
  ],
),

这是另一个带有 Expanded 小部件和行的示例，Expanded 将自动占据图标以外的其余宽度

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
         Icon(),   
         Icon(),   
         Icon(),  
         Expanded(
           child: Center(
             child: DotsIndicator(),
           )
         ),
      ],
    ),

// UI with left and right icons

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
         Icon(),   
         Icon(),   
         Icon(),  
         Expanded(
           child: Center(
             child: DotsIndicator(),
           )
         ),
        Icon(),  
      ],
    ),

供您参考 - Spacer 和 Expanded

【讨论】：

谢谢你。有用。你能给我解释一下它是如何工作的吗？
嘿@CôngHiến Expanded widget 会根据它的 flex 自动获取宽度，因为我们只使用 1 个 expanded widget，所以没有必要指定它应该占用多少百分比的宽度，所以在上面的示例中，所有宽度都将分配给 Expended除了图标宽度
嘿@CôngHiến 如果我的回答符合您的要求，那么如果您能对我的回答投赞成票，我将不胜感激
好吧，当我在 Row 的右端放置另一个图标时，它在外面扩展了子对齐以对齐右下角的图标，因此它与您的建议完美结合，而不是没有它。我不明白为什么？
你能分享你的代码吗？

【解决方案2】：

在行中，您可以在范围内给一个SizedBox(width: )，将特定的小部件推送一定的距离。

【讨论】：

【解决方案3】：

 Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  ///put favourite,comment,send icon here
                ],
              ),
              ///put yor indicator widget here
              Indicator(),
              ///add an empty container here
              Container()
            ],
          )

【讨论】：

【解决方案4】：

这样做会有点复杂，但我有两个建议：

使用Row()的MainAxisAlignment.start，然后在第一个小部件和指示器之间添加所需的小部件，以提供空间，例如SizedBox(width:80.0)
使用Column() 分隔两个小部件。我更喜欢这个，因为我只是将轮播指示器添加为列中的第一项，然后将其包装在 Center() 小部件中，然后列中的第二个小部件将是您想要的小部件（收藏夹、消息和 cmets 图标）

【讨论】：