如何在flutter中将一行3个元素中仅一个元素居中

Question

我正在创建 Instagram 克隆应用程序，我想创建一个像 Instagram 帖子一样的视图。我希望我的轮播指示器位于行的中央，而一组按钮（例如“喜欢”或“评论”）位于左侧，最后一个按钮位于右侧。

我尝试过这段代码；然而，我的旋转木马不在我的行的中心。

Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      IconButton(
                        onPressed: () {},
                        icon: Image.asset(
                          'assets/icons/like_icon.png',
                          width: iconSize,
                          height: iconSize,
                        ),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Image.asset(
                          'assets/icons/comment_icon.png',
                          width: iconSize,
                          height: iconSize,
                        ),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Image.asset(
                          'assets/icons/message_icon.png',
                          width: iconSize,
                          height: iconSize,
                        ),
                      ),
                    ],
                  ),
                  const Spacer(),
                  Expanded(
                    child: CarouselIndicator(
                      count: widget.postEntity.content.length,
                      index: _currentIndex,
                      color: Colors.grey,
                      activeColor: Colors.blue,
                      width: 6,
                      height: 6,
                    ),
                  ),
                  const Spacer(),
                  const Icon(Icons.abc)
                ],
              )

这就是我预期的结果

这是我从我提供的代码中得到的内容

如您所见，我的轮播指示器偏离了我所在行的右侧。

我想知道有没有什么办法可以达到我的要求。

Answer 1

虽然将

Expanded

小部件作为

Row

中的子级，但对齐和

Spacer

都没有任何效果。

您只需将开头的前三个图标和末尾的最后一个图标对齐，中间的剩余空间由

Expanded

小部件分配，并在其中心代表您的

carousel

。

               Row(
                    children: [
                      Row(
                        children: [
                          IconButton(
                            onPressed: () {},
                            icon: Image.asset(
                              'assets/icons/like_icon.png',
                              width: iconSize,
                              height: iconSize,
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Image.asset(
                              'assets/icons/comment_icon.png',
                              width: iconSize,
                              height: iconSize,
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Image.asset(
                              'assets/icons/message_icon.png',
                              width: iconSize,
                              height: iconSize,
                            ),
                          ),
                        ],
                      ),
                
                      Expanded(
                        child: Center(child:CarouselIndicator(
                          count: widget.postEntity.content.length,
                          index: _currentIndex,
                          color: Colors.grey,
                          activeColor: Colors.blue,
                          width: 6,
                          height: 6,
                        ),),
                      ),
                      
                      const Icon(Icons.abc)
                    ],
                  )