时间戳

首页 > 解决方案 > 文字都是未对齐的颤动

flutter - 文字都是未对齐的颤动

问题描述

我有这个设计，其中几个文本和图像我试图按顺序显示所有内容。但是当文本的长度增加或减少时，对齐方式都崩溃了。第一张图片是我正在尝试的设计第二张图片是我迄今为止尝试过的.

我正在尝试为 API 进行设计。如果文本很长会影响设计，所以请帮助我解决如何在 API 数据的基础上进行修复

这就是我要的

这是我得到的

代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
body:SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Flexible(
                flex: 0,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Card(
                    child: Container(
                      height: 450,
                      width: 400,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Flexible(
                            flex: 0,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Text("Register Number"),
                                Text(":"),
                                Flexible(
                                    flex: 0,
                                    child: Text(
                                      'KL 10 AC 1896',
                                      style: TextStyle(
                                          color: Color.fromRGBO(92, 52, 76, 1),
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),
                                    )),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 0,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Text("Model Name"),
                                Text(":"),
                                Flexible(
                                    flex: 0,
                                    child: Text(
                                      'Maruti Suzuki Swift',
                                      style: TextStyle(
                                          color: Color.fromRGBO(92, 52, 76, 1),
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),
                                    )),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 0,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Text("Requested Litres"),
                                Text(":"),
                                Flexible(
                                    flex: 0,
                                    child: Text(
                                      '4 L Petrol',
                                      style: TextStyle(
                                          color: Color.fromRGBO(92, 52, 76, 1),
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),
                                    )),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 0,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Text("Petrol Station"),
                                Text(":"),
                                Flexible(
                                    flex: 0,
                                    child: Text(
                                      'Malappuram',
                                      style: TextStyle(
                                          color: Color.fromRGBO(92, 52, 76, 1),
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),
                                    )),
                              ],
                            ),
                          ),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Text("Odometer Reading"),
                              Text(":"),
                              Text(
                                '19548 KM',
                                style: TextStyle(
                                    color: Color.fromRGBO(92, 52, 76, 1),
                                    fontSize: 15,
                                    fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                          Flexible(
                            flex: 0,
                            child: Container(
                              width: 280,
                              height: 180,
                              decoration: BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                        "assets/images/dummy.png",
                                      ),
                                      fit: BoxFit.cover)),
                            ),
                          ),
                          Flexible(
                            flex: 0,
                            child: Padding(
                              padding: EdgeInsets.only(top: 10),
                              child: GestureDetector(
                                child: Container(
                                  height: 45,
                                  width: 250,
                                  child: Center(
                                    child: Text(
                                      "Delete Request",
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 15,
                                          fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5),
                                    color: Color.fromRGBO(92, 52, 76, 1),
                                  ),
                                ),
                                onTap: () {},
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
}

标签： flutterflutter-layout

解决方案

如果您想对齐小部件，您可以随时使用Table（官方视频）小部件。例如

Table(
    children: [
        TableRow(
           children: [
              TableCell(
                child: Text('My label 1'),
              ),
              TableCell(
                child: Text(':'),
              ),
              TableCell(
                child: Text('My Value 1'),
              ),
            ]
          ),
        TableRow(
          children: [
            TableCell(
              child: Text('My label 2'),
            ),
            TableCell(
              child: Text(':'),
            ),
            TableCell(
              child: Text('My Value 3'),
            ),
          ]
        ),
      ]
    ),

看看这个 CodePen https://codepen.io/fcontreras-the-bashful/pen/qBZOXvZ

推荐阅读