文字全部不对齐

问题描述

我有这样的设计,其中几个文本和图像我试图按顺序显示所有内容。但是当文本的长度增加或减少时,对齐方式全部分崩离析。第一个图像是我正在尝试的设计 第二张图片是我到目前为止尝试过的。

我正在尝试为API设计。如果文本太长会影响设计,所以请在API数据的基础上帮助我解决此问题

This is What i want

This What i am getting

代码

@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,children: [
                          Flexible(
                            flex: 0,child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,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,children: [
                                Text("Model Name"),child: Text(
                                      'Maruti Suzuki Swift',children: [
                                Text("Requested Litres"),child: Text(
                                      '4 L Petrol',children: [
                                Text("Petrol Station"),child: Text(
                                      'Malappuram',Row(
                            crossAxisAlignment: CrossAxisAlignment.center,children: [
                              Text("Odometer Reading"),Text(
                                '19548 KM',style: TextStyle(
                                    color: Color.fromRGBO(92,child: Container(
                              width: 280,height: 180,decoration: BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                        "assets/images/dummy.png",fit: BoxFit.cover)),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,decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5),color: Color.fromRGBO(92,onTap: () {},)
                        ],)
            ],}

解决方法

如果要在小部件上对齐,可以始终使用TableOfficial video)小部件。例如

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

,

行属性mainAxisAlignment: MainAxisAlignment.spaceEvenly,不能那样工作。它将根据项目的大小对齐项目,因此在您的情况下,它会将所有“:”带到第一个项目结束和第三个项目开始之间的中心。

如果要像示例一样对齐项目,则应执行以下操作

为什么有一个带有flex 0的灵活小部件?似乎不必要

                ... 
                Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,//We are telling to all the children to stretch,it's necessary for Row
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                       Row(
                          crossAxisAlignment: CrossAxisAlignment.center,children: [
                            Expanded(child:Text("Register Number")) //Maybe add a Padding widget to Text (?)
                            Expanded(
                             child:Row(children:[
                               Text(":"),Expanded(child:
                                  Text(
                                  'KL 10 AC 1896',style: TextStyle(
                                      color: Color.fromRGBO(92,52,76,1),fontSize: 15,fontWeight: FontWeight.bold),))
                            ]))
                          ],...
,
class MyWidget extends StatelessWidget {
  final leftText = [
    "Register Number","Model Name","Requested Litres","Petrol Station","Odometer Reading"
  ];
  final rightText = [
    "KL 10 AC 1896","Maruti Suzuki Swift","4L Petrol","Malappuram","19548 KM"
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,children: [
              for (var text in leftText)
                Text(
                  text,style: TextStyle(
                    color: Colors.white,fontSize: 16,fontWeight: FontWeight.bold,],const SizedBox(width: 8.0),Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,children: [
              for (var text in rightText)
                Row(
                  children: [
                    Text(
                      ":",style: TextStyle(
                        color: Colors.white,Text(
                      text,style: TextStyle(
                        color: Color.fromRGBO(92,);
  }
}

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...