Flutter:将行小部件中的特定子对象居中对齐

q9yhzks0  于 2023-01-27  发布在  Flutter
关注(0)|答案(4)|浏览(151)

我是flutter的新手,我正在尝试编写一个UI Instagram克隆,如何将carousel指示器与Row()父对象(如this)对齐

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

我得到的结果:![final result][this]

btxsgosb

btxsgosb1#

嘿,你可以在图标和行中的点子对象之间使用Spacer()。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

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

供您参考-SpacerExpanded

acruukt9

acruukt92#

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

3b6akqbq

3b6akqbq3#

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

o8x7eapl4#

这样做有点复杂,但我有两个建议:
1.使用Row()MainAxisAlignment.start,然后在第一个小部件和指示器之间添加所需的小部件,以给予空间,例如SizedBox(width:80.0)
1.使用Column()将两个小部件分开。我更喜欢这样,因为我只需要将carousel指示器添加为列中的第一项,然后将其 Package 在Center()小部件中,然后列中的第二个小部件将是您想要的小部件(收藏夹、消息和评论图标)

相关问题