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



                                            ],
                                          ), 
                                      ],
                                    ),




                                  )
                            );

基于已尝试的答案进行截图。

- newbie

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

- anmol.majhail

---

我得到了一个奇怪的形状，其中有两列琥珀色，并且没有测试板单词。 - newbie

但是如果您发现您的文本也是左对齐，那么如何将“测试板”居中呢？ - newbie

我已经更新了我的问题，并附上了最新的屏幕截图。你可以看到，我尝试缩小宽度，因为我实际上是在底部工作表中调用这个功能，所以有很多列表项，55太大了，所以我将其降低到30，并调整了大小框和容器宽度为5。但是测试板仍然没有居中。 - newbie

抱歉，我希望它居中。如果我的宽度较小，我仍然可以实现漂亮的颜色列吗？我已更新了我的问题，您能看到吗？ - newbie

好的，我看到了你更新的答案crossAxisAlignment: CrossAxisAlignment.center，解决了我的居中问题。现在我想让宽度变小，并使颜色列显得漂亮，比如设为30。我应该改哪些设置？我尝试过使用Container、SizeBox等控件，但不是很清楚。 - newbie

是的，这个列表出现在底部表中，所以我想让高度更小一些，55太大了。 - newbie