flutter - 行内的容器对齐

Question

我想知道如何将 3 个不同的容器排成一行，以便 2 个保持在左侧，1 个保持在右侧。

像这样： http: //prntscr.com/tovlhw。

我所做的方式只适用于这个 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),
                                                                        ),


    ],
    ),
    ),

标签： flutterdartalignment

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

结果：