Flutter 中文本和布局周围的空间

Question

如何删除文本周围的空间以使视图更精确？或者我的布局通常格式错误？我正在构建一个自定义时间线，我在将这个文本包裹在 Column 中时遇到了问题，但不知道如何在文本周围的空白处使用 remove。

这是我当前的布局：

我想做一个更内嵌的布局，所以圆圈、“PICK UP”文本和“JKF AIRPORT..”文本都对齐，使其更优雅。代码如下：

Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            // circle for timeline
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Padding(
                padding: EdgeInsets.only(right: 8.0),
                child: buildCircle(result),
              ),
            ),
            //Text for timeline
            Flexible(
              flex: 4,
              fit: FlexFit.loose,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Flexible(
                    fit: FlexFit.loose,
                    flex: 2,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "PICK UP",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.6),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w500,
                            fontSize: 10.0,
                            height: 1.6,
                            letterSpacing: 1.5,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text(
                          '11:00',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.6),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 14.0,
                            height: 1.43,
                            letterSpacing: 0.25,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 32,
                  ),
                  Flexible(
                    flex: 6,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'JKF Airport, New York',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.87),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 16.0,
                            height: 1.5,
                            letterSpacing: 0.15,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text(
                          'FLIGHT 6E 2341',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.87),
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w400,
                            fontSize: 16.0,
                            height: 1.5,
                            letterSpacing: 0.15,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),

这是理想的布局：

我没有删除TextStyle，因为这可能会导致一些问题，所以我留下了它以防万一。

提前感谢您的帮助！

Answer 1

向文本添加垂直空间的主要内容是height: 1.5 设置。也不需要大量使用 Flexible。

通过更改，我可以让它看起来像这样：

这是修改后的代码：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  //mainAxisAlignment: MainAxisAlignment.start,
  children: [
    // circle for timeline
    Padding(
      padding: EdgeInsets.only(right: 8.0),
      child: Container(width: 20, height: 20, color: Colors.red),
    ),
    //Text for timeline
    Row(
      //crossAxisAlignment: CrossAxisAlignment.start,
      //mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "PICK UP",
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.6),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w500,
                fontSize: 10.0,
                height: 1.6,
                letterSpacing: 1.5,
              ),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              '11:00',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.6),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w400,
                fontSize: 14.0,
                height: 1.43,
                letterSpacing: 0.25,
              ),
            ),
          ],
        ),
        SizedBox(
          width: 32,
        ),
        Column(
          //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'JKF Airport, New York',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.87),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w400,
                fontSize: 16.0,
                // height: 1.5,
                letterSpacing: 0.15,
              ),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'FLIGHT 6E 2341',
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Color.fromRGBO(0, 0, 0, 0.87),
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w400,
                fontSize: 16.0,
                // height: 1.5,
                letterSpacing: 0.15,
              ),
            ),
          ],
        ),
      ],
    ),
  ],
)

Answer 2

将您的文本包装到容器中并赋予它们高度宽度。在用 FittedBox 再次包装你的文本之后。它会工作

你的代码会喜欢这样的..

Container(
      height: height,
      width: width,
      child: FittedBox(
        child: Text("Your text"),
      ),
    );

这对我有用