如何在flutter中对齐RichText的子项

Question

如何使用 RichText 在 flutter 的 Row 小部件中获得“MainAxisAlignment.spaceBetween”的相同结果：

 Container(
            width: double.maxFinite,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black)),
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: RichText(
              text: TextSpan(
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: 16,
                    color: Colors.black),
                children: [
                  TextSpan(
                    text: 'first text',
                  ),
                  TextSpan(
                    text: 'second text',
                  ),
                ],
              ),
            )),

我需要得到这个结果：

我尝试使用 WidgetSpan 和 Align 小部件来包装子文本

Container(
            width: double.maxFinite,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black)),
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: RichText(
              text: TextSpan(
                children: [
                  WidgetSpan(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'first text',
                        textAlign: TextAlign.left,
                        textDirection: TextDirection.ltr,
                        style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                  WidgetSpan(
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        'second text',
                        textAlign: TextAlign.right,
                        textDirection: TextDirection.ltr,
                        style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            )),

但它给了我新行中的“第二个文本”！不在同一行

有什么方法可以使用 RichText 小部件来做到这一点吗？

Answer 1

你可以使用

Row

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Text('start'),
    Text('end'),
  ],
),

您还可以使用

MainAxisAlignment.spaceBetween

并用

Text

包裹

Padding

小部件，将它们准确放置在您想要的位置。