Flutter 卡片列对齐和文本居中

Question

基本上我正在构建一个列表视图。所以我正在使用卡片，我想要实现的是在卡片中我想划分一个部分来为列着色，另外一个部分我想写一个我希望它居中的文本，但我尝试了很多选项不能达到。

下面是我想为颜色列实现的屏幕截图，但我希望文本居中。

我所取得的成就如下

我注意到我的颜色没有完全覆盖它外面有一些白色元素。以下是我为实现它所做的工作的完整代码。

我想解决的问题如下

1) To make the color column look clean and neat as the image above because now I tried to adjust its height slight smaller than the card height which is 35
2) The text to be centered
3) The gesture to detect the whole of the text column
4) I have other design where it might have 3 or more column and how to build a separator
5) I have set the card width: 30.0, but it always goes right till the end it never stays at 30.


new Container(
                        height:190,

                        child:
                        new ListView.builder(
                          shrinkWrap: true,
                          itemCount: vdata.length,

                          itemBuilder: (BuildContext ctxt, int index) {

                            return Container(
                              margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
                              width: 30.0,
                              height: 35.0,

                                  child: Card(
                                    color: Colors.white,
                                    child: Row (
                                      //mainAxisSize: MainAxisSize.max,
                                     // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      children: <Widget>[
                                              new Column(
                                                 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,

                                                children: <Widget>[

                                                Container(

                                                      decoration: new BoxDecoration(
                                                      color: Colors.amber,
                                                      borderRadius: new BorderRadius.only(
                                                        topLeft: const Radius.circular(5),
                                                        bottomLeft: const Radius.circular(5)
                                                      ),

                                                    ),
                                                  height: 27,
                                                  width: 10,

                                                  ),
                                              ],
                                              ),
                                              new Column(
                                                mainAxisAlignment: MainAxisAlignment.center,
                                                crossAxisAlignment: CrossAxisAlignment.center,
                                                mainAxisSize: MainAxisSize.max,
                                                  //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                                children: [
                                                      //new Row( 
                                                          // mainAxisSize: MainAxisSize.max,


                                                            //children: <Widget>[
                                                        new GestureDetector(
                                                          onTap: () {
                                                            setState(() {
                                                              _localVehicleSelected=vdata[index]["pr"].toString();
                                                            });


                                                          doSomething(vdata[index]["pr"].toString());

                                                        }, 
                                                        child:new Text('Test Plate',

                                                                  ),
                                                       ),


                                                    //style: Theme.of(context).textTheme.body2
                                                  //],
                                                 //),



                                            ],
                                          ), 
                                      ],
                                    ),




                                  )
                            );

基于回答的屏幕截图尝试。

Answer 1

你需要使用卡片形状来获得你想要的东西，另外你需要使用 - crossAxisAlignment: CrossAxisAlignment.center,

Container(
          height: 190,
          child: new ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext ctxt, int index) {
                return Container(
                    margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
                    width: 25.0,
                    height: 55.0,
                    child: Card(
                      clipBehavior: Clip.antiAlias,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0)),
                      color: Colors.white,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Container(
                            color: Colors.amber,
                            width: 10,
                          ),
                          SizedBox(
                            width: 10.0,
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('testing');
//                                  setState(() {
//                                    _localVehicleSelected =
//                                        vdata[index]["pr"].toString();
//                                  });
//
//                                  doSomething(vdata[index]["pr"].toString());
                              },
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  //new Row(
                                  // mainAxisSize: MainAxisSize.max,

                                  //children: <Widget>[
                                  new Text(
                                    'Test Plate',
                                  ),

                                  //style: Theme.of(context).textTheme.body2
                                  //],
                                  //),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ));
              }))