Flutter布局求助：绿色组件与右侧组件动态适配及溢出问题解决

我是Flutter初学者，希望实现左侧绿色Widget与右侧Widget的上下两端动态对齐，同时解决文本溢出问题，尝试多种方法未成功，附上现有代码和期望效果，求详细实现方案。

期望效果 #

现有代码 #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return history();
  }

  Widget history() {
    return Container(
      color: Colors.lightBlue,
      child: Row(
        //crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          leftContainer("1", Colors.green),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                rightContainer(
                    "Forgot to attendance punch, i was in the office from 8.30 to 6.20",
                    null,
                    false),
                rightContainer("23/01/2023-23/01/2023", Icons.date_range, true),
                rightContainer("08:30-18:20", Icons.access_time, true),
                rightContainer("Accepted", Icons.done, true),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget leftContainer(String totalDays, Color color) {
    return Container(
      padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
      decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.zero,
              topRight: Radius.circular(8.0),
              bottomLeft: Radius.zero,
              bottomRight: Radius.circular(8.0))),
      child: Column(
        //crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          customTextLeftContainer(totalDays),
          customTextLeftContainer("Day"),
        ],
      ),
    );
  }

  Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
    return Container(
      margin: const EdgeInsets.only(left: 8),
      child: Row(
        children: [
          iconShowed ? Icon(size: 14, iconData) : Container(),
          customTextRightContainer(value, iconShowed)
        ],
      ),
    );
  }

  Widget customTextLeftContainer(String value) {
    return Text(value,
        style: const TextStyle(
            fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold));
  }

  Widget customTextRightContainer(String value, bool iconShowed) {
    return Container(
      margin: iconShowed
          ? const EdgeInsets.only(left: 8)
          : const EdgeInsets.only(left: 0),
      child: Text(
        value,
        style: const TextStyle(
          fontFamily: 'Rubik',
        ),
      ),
    );
  }
}

问题解决步骤 #

1. 实现左右Widget上下两端对齐 #

• 给外层Row添加crossAxisAlignment: CrossAxisAlignment.stretch，让左右子Widget在垂直方向填满Row高度，为两端对齐打下基础
• 修改左侧绿色容器的Column，设置mainAxisAlignment: MainAxisAlignment.spaceBetween，让内部的"1"和"Day"文本分别靠顶部和底部排列，容器高度自动匹配右侧内容高度

2. 修复文本溢出问题 #

• 给右侧的Column外层包裹Expanded，让它占据Row的剩余宽度，避免宽度不足导致溢出
• 在customTextRightContainer的Text组件中添加maxLines: null和overflow: TextOverflow.visible，允许文本自动换行
• 给rightContainer中的customTextRightContainer外层包裹Flexible，确保文本有足够空间换行

修改后的完整代码 #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return history();
  }

  Widget history() {
    return Container(
      color: Colors.lightBlue,
      child: Row(
        // 开启垂直方向拉伸，让左右Widget高度一致
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          leftContainer("1", Colors.green),
          // 用Expanded让右侧Column占据剩余宽度
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                rightContainer(
                    "Forgot to attendance punch, i was in the office from 8.30 to 6.20",
                    null,
                    false),
                rightContainer("23/01/2023-23/01/2023", Icons.date_range, true),
                rightContainer("08:30-18:20", Icons.access_time, true),
                rightContainer("Accepted", Icons.done, true),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget leftContainer(String totalDays, Color color) {
    return Container(
      padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
      decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.zero,
              topRight: Radius.circular(8.0),
              bottomLeft: Radius.zero,
              bottomRight: Radius.circular(8.0))),
      child: Column(
        // 让内部文本上下两端分布
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          customTextLeftContainer(totalDays),
          customTextLeftContainer("Day"),
        ],
      ),
    );
  }

  Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
    return Container(
      margin: const EdgeInsets.only(left: 8, top: 4, bottom: 4),
      child: Row(
        children: [
          if (iconShowed) Icon(size: 14, iconData),
          // 用Flexible让文本有足够空间换行
          Flexible(
            child: customTextRightContainer(value, iconShowed),
          )
        ],
      ),
    );
  }

  Widget customTextLeftContainer(String value) {
    return Text(value,
        style: const TextStyle(
            fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold));
  }

  Widget customTextRightContainer(String value, bool iconShowed) {
    return Container(
      margin: iconShowed
          ? const EdgeInsets.only(left: 8)
          : const EdgeInsets.only(left: 0),
      child: Text(
        value,
        // 允许文本自动换行
        maxLines: null,
        overflow: TextOverflow.visible,
        style: const TextStyle(
          fontFamily: 'Rubik',
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者kawser19