Flutter 颤振文本小部件中的字符串空格问题

我正在尝试从带有空格的字符串创建一个文本小部件。 但在应用程序中，我的文本并不像在文本中那样在右侧对齐

你知道怎么解决吗？谢谢

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Text Demo',
       home: MyHomePage(),
     );
   }
 }

class MyHomePage extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Text(
        '''
 04.03.2021                      11:02:56
 Trm-Id:                         23690130
 AID:                      A0000000032020
 Trx Seq-Nr:                         5429
 Trx Ref. Nr:                 58894675511
        ''',
      ),
    );
  }
}

---

尝试使用列和行进行对齐：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Text Demo',
       home: MyHomePage(),
     );
   }
 }

class MyHomePage extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Column(children:[
        Row(children:[
          Text('04.03.2021'),
          Spacer(),
          Text('11:02:56'),
            ],
          ),
        Row(children:[
          Text('04.03.2021'),
          Spacer(),
          Text('11:02:56'),
            ],
          ),
        Row(children:[
          Text('04.03.2021'),
          Spacer(),
          Text('11:02:56'),
            ],
          ),
        Row(children:[
          Text('04.03.2021'),
          Spacer(),
          Text('11:02:56'),
            ],
          ),
        ],
      ),
    );
  }
}

---

这里的问题是编辑器中的空间具有特定的像素值，但在模拟器中它是不同的，这就是为什么它看起来不同的原因。 要解决这个问题，您需要将屏幕划分为某些比率，在这些比率中，您可以定义您的小部件

要划分屏幕，您需要使用一个小部件，称为

Expanded

。此小部件使用参数

flex

，其中包含整数值以按比例划分屏幕。例如，

flex:1

表示高度/宽度的1/10

您的问题可以这样解决：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Text Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Expanded(
                flex: 3,
                child: Text("Trm-Id")
              ),
              Expanded(
                flex: 1,
                child: Text(":")
              ),
              Expanded(
                flex: 6,
                child: Text("23690130")
              )
            ]
          ),
          Row(
            children: [
              Expanded(
                flex: 3,
                child: Text("AID")
              ),
              Expanded(
                flex: 1,
                child: Text(":")
              ),
              Expanded(
                flex: 6,
                child: Text("A0000000032020")
              )
            ]
          ),
          //And so on
        ]
      )
    );
  }
}

---

这里是你的代码：

除了其他的答案，考虑使用小部件，它可以创建一个非常统一的外观，特别适用于较大的表。

谢谢你的回答，这个动态文本我将从服务器获得，并且不应该修改它）请不要使用这样的文本。每个设备都有自己的尺寸，因此每个设备上的文本看起来都不一样。要获得所需内容，请使用行和/或列的组合。如果您需要代码方面的帮助，请告诉我