Question

如何使用分隔符将文本对齐到中心，如图所示：

Answer 1

请给您逻辑，因为您未提供相关代码，而且您在这里还是新手。

将Row小部件和三个Text小部件作为子级，您可以在图像中显示它们。用Text小部件包装第一个Expanded和第三个mainAxisAlignment: MainAxisAlignment.spaceBetween并设置Row小部件中的Text。而且，您还必须设置所有List小部件的对齐方式，例如第1个具有右对齐，第2个具有居中，第3个具有左对齐。

就这样：）

〜PS：您必须为每行重复（基于您的图像外观），使用InfoBox小部件或类似工具可能很容易。

Answer 2

可以结合使用Expanded和Align。下面是可以用来完成相同行为的代码。

Container(
  color: Colors.white,
  child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Text("Test"),
                    ),
                  ),
                  Align(
                    alignment: AlignmentDirectional.center,
                    child: Center(
                      child: Text(" : "),
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerStart,
                      child: new Text("123"),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Text("Test 123"),
                    ),
                  ),
                  Align(
                    alignment: AlignmentDirectional.center,
                    child: Center(
                      child: Text(" : "),
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerStart,
                      child: new Text("9337822"),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Text("Test 123 123"),
                    ),
                  ),
                  Align(
                    alignment: AlignmentDirectional.center,
                    child: Center(
                      child: Text(" : "),
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerStart,
                      child: new Text("111888999999"),
                    ),
                  ),
                ],
              ),
            ],
          ),
        )

如何相对于中间的分隔符使flutter中的文本对齐？

2 个答案: