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()小部件中，然后列中的第二個小部件將是您想要的小部件（收藏夾、消息和評論圖標）