Flutter：在 Row Widget 中将特定子元素居中对齐

Question

我是一个新手，我正在尝试编写 UI Instagram 克隆，如何将轮播指示器与像这样的Row()父级对齐到中心

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

结果我得到： ！[最终结果][这个]

Answer 1

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

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

这是Expanded小部件和行的另一个示例，扩展将自动占用除图标之外的其余宽度

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

// 带有左右图标的 UI

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

供您参考 - Spacer和Expanded

Answer 2

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

Answer 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()
            ],
          )

Answer 4

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

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