在TextSpan之间留出空间

Question

我试图在TextSpan之间留出空间--在TextSpan之间添加空间的最好方法是什么？

child: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: 'Don\'t have an Account?',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.w400,
              ),
            ),
            
            TextSpan(
              text: 'Sign Up',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),

Answer 1

SizedBox小部件可以在两个小部件之间使用，以在两个小部件之间添加空间。使用SizedBox，方法是用WidgetSpan宽度包装它

child: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: 'Don\'t have an Account?',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.w400,
              ),
            ),
            WidgetSpan(
             child: SizedBox(width: 10),
            ),
            TextSpan(
              text: 'Sign Up',
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),

Answer 2

如果您希望在文本之间获得最大的空间，则可以选择Row小部件。对于RichText内部的x空间，您可以使用

TextSpan(...),
WidgetSpan(child: SizedBox(width: x)),
TextSpan(...),

RichText(
  text: const TextSpan(
    children: [
      TextSpan(
        text: 'Don\'t have an Account?',
        style: TextStyle(
          color: Color.fromARGB(255, 0, 0, 0),
          fontSize: 15.0,
          fontWeight: FontWeight.w400,
        ),
      ),

      WidgetSpan(child: SizedBox(width: 10)), ///this

      TextSpan(
        text: 'Sign Up',
        style: TextStyle(
          color: Color.fromARGB(255, 0, 0, 0),
          fontSize: 15.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
),

Answer 3

您可以使用高度属性在TextStyle上创建一些间隔：

 RichText(
          text:  TextSpan(
            children: [
              TextSpan(
                text: 'Don\'t have an Account?',
                style: TextStyle(
                  height: 1.5, //USE THIS PROPERTY
                  color: Colors.white,
                  fontSize: 15.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              SizedBox(height: 10),
              TextSpan(
                text: 'Sign Up',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),

文档中的更多信息：https://api.flutter.dev/flutter/painting/TextStyle/height.html