文本间距与另一个文本长度

Question

有没有办法 space 将 No 和 Expiry Date 的 : 像下图那样对齐，而不是手动添加空的 space文本？

Answer 1

使用 Column 和 Rows:

Column(
children: [
    Rows(
        mainAxisAlignment: MainAxisAlignment.spaceBetween
        children: [
            Text(),
            Text(),
        ],
    ),
    Rows(
        mainAxisAlignment: MainAxisAlignment.spaceBetween
        children: [
            Text(),
            Text(),
        ],
    ),
  ],
),

Answer 2

您可以使用 Sizedbox 为 Text 小部件定义特定大小。

样本：

class CustomText extends StatelessWidget {
  const CustomText({Key? key}) : super(key: key);

  txtItem(title, width) => SizedBox(
        width: width,
        child: Text(
          title,
          textAlign: TextAlign.left,
        ),
      );

  @override
  Widget build(BuildContext context) {
    var textItemWidth = MediaQuery.of(context).size.width * .3;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                txtItem("No", textItemWidth),
                const Text(":"),
                txtItem("Hi", textItemWidth),
              ],
            ),
            Row(
              children: [
                txtItem("ExpireDate", textItemWidth),
                const Text(":"),
                txtItem("Hi", textItemWidth),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

文本间距与另一个文本长度

Text spacing with another length of text

text

dart

flutter