一行内的容器对齐

Question

我想知道如何将 3 个不同的容器对齐成一行，这样 2 个留在左边，1 个留在右边。

我的方法只适用于这个 AVD，因为它使用像素来确定位置。


 
            GestureDetector(
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context) => Favoritos()));
    },
                child: Row(
                   mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                         Container(
                            padding: EdgeInsets.fromLTRB(10,16,0,16),
                             color: Colors.white,
                                  child: Icon(Icons.favorite),
                                                                       ),

                           Container(
                              padding: EdgeInsets.fromLTRB(5,20,140,20),
                              color: Colors.white,
                                   child: Text('Favoritos'),
                                                                        ),

                           Container(
                              padding: EdgeInsets.fromLTRB(145,16,5,16),
                                color: Colors.white,
                                      child: Icon(Icons.keyboard_arrow_right),
                                                                        ),


    ],
    ),
    ),

Answer 1

这可以通过 ListTile 小部件和 Card 小部件轻松完成（如果您还想要背景颜色）：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: ListTile(
        title: Text(
          'Favourite',
          style: TextStyle(color: Colors.black),
        ),
        leading: Icon(Icons.favorite, color: Colors.black),
        trailing: Icon(Icons.arrow_right, color: Colors.black),
      ),
    );
  }
}

结果

如果您想使用 Row 方法，请像这样使用 Spacer：还请记住，您可以使用 Container height 属性使您的行更大。

Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Icon(Icons.favorite, color: Colors.black),
          SizedBox(
            width: 10.0, // give the witdh you want between icon and text
          ),
          Text(
            'Favourite',
            style: TextStyle(color: Colors.black),
          ),
          Spacer(),
          Icon(Icons.arrow_right, color: Colors.black),
        ],
      ),
    );

结果：

Answer 2

用一行mainAxisAlignment: MainAxisAlignment.spaceBetween，将两个children左右均匀对齐，其中children为：

1) A包含要放置在左侧的 2 个项目的行
2) 包含要放置在右侧的项目的容器

检查这是否解决了您的问题

这适用于任何目的，但 ListTile 是适合您的情况的方法

Answer 3

使用以下方法解决：

                width: MediaQuery.of(context).size.width

Answer 4

Container(
height: 100px
width:MediaQuery.of(context).size.width,
child:ListTile(
leading:Icon(Icons.favorite),
  title: Text(
      'Favourite',
    ),
    trailing: Icon(Icons.arrow_right),
)
)

Answer 5

嗨，我建议您将行 class 包裹在一个容器 class 中，并尽可能地设置容器的高度和宽度。这将为该行提供完整的矩形区域，然后您可以将行 class 的子项对齐到任何您想要的位置。

Container(
        height: MediaQuery.of(context).size.height,
        padding: EdgeInsets.all(16),
        child:  Column(
            children: [
              Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).size.height*0.08),
              ),
              Container(
                alignment: Alignment.centerRight,
                child: RaisedButton(
                ),
              ),
              Container(
                  alignment: Alignment.centerLeft,
                  child: Text()
              ),
             Container(
                alignment: Alignment.centerRight,
                padding: EdgeInsets.only(top: 28),
                child: RaisedButton(
                  child: Text('Submit',style: TextStyle(color: Colors.white),),
                ),
              ),
            ],
          ),
          ),

一行内的容器对齐

Container alignment inside a row

alignment

dart

flutter