颤音：对齐中心一个特定的孩子窗口小部件

发布于 2025-02-10 06:54:05 字数 494 浏览 1 评论 0原文

我是Flutter中的新手，我正在尝试编码UI Instagram克隆，如何使用row（） parent of like the Center将轮播指示器对齐中心 this

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

结果我得到了：！[最终结果] [this]

原文

I'm a newbie in flutter and I'm trying to code a UI Instagram clone, How can I align a carousel indicator to the center with a Row() parent like
this

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

Result I got:
![final result][this]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开浅夏 2025-02-17 06:54:05

嘿，您可以在行儿童中使用图标和点之间的垫片（）。额外宽度 -

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

这是展开 widget and row的另一个示例

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

。

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

垫片窗口小部件自动在下面的 href =“ https://api.flutter.dev/flutter/widgets/spacer-class.html” rel =“ nofollow noreferrer”> spacer 和
展开

Hey you can use Spacer() between icons and dot in row children . Spacer widget auto take extra width like below -

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

Here is another example with Expanded widget and row, Expanded will automatically take rest of width other then icons

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

For you reference - Spacer and
Expanded

回复收藏 0 原文

如果没结果 2025-02-17 06:54:05

在该行中，您可以在范围内给出一个size box（width：），以将特定的小部件推动一定距离。

回复收藏 0 原文

深海不蓝 2025-02-17 06:54:05

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

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

回复收藏 0 原文

梦罢 2025-02-17 06:54:05

这样做会以某种方式复杂，但是我有两个建议：

使用row（）'s mainaxisalignment.start然后在第一个小部件和指示器之间添加一个所需的小部件，给出空间，例如sizedbox（width：80.0）
使用column（）将两个小部件分开。我更喜欢这个，因为我只会在列中添加轮播指示器作为第一个项目，然后将其包装在center（） widget中，那么列中的第二个小部件将是您所需的窗口小部件（fely，messages，messages，消息和评论图标）