Flutter布局问题：如何使两端Widget与其他Widget保持对齐

问题分析 #

你遇到的核心问题有两个：

1. 放置两个Text的Row设置了mainAxisSize: MainAxisSize.min，这会让Row宽度仅包裹内部文本，导致MainAxisAlignment.spaceBetween无法生效，没法让文本分处两端。
2. 外层Container未设置内边距，同时上方标题Text和Accordion组件没有统一对齐基准，使得文本容易超出预期对齐范围。

修复方案 #

按以下步骤修改代码：

• 移除Row的mainAxisSize: MainAxisSize.min属性，让Row默认占满父容器宽度。
• 给外层Container添加左右内边距，确保所有组件在统一范围内对齐。
• 给Column设置crossAxisAlignment: CrossAxisAlignment.start，让所有子组件左对齐，匹配期望布局。

修改后的代码片段 #

child: Scaffold(
  backgroundColor: Colors.transparent,
  body: Container(
    // 添加内边距，统一所有组件的左右对齐范围
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      // 设置左对齐，让所有子组件保持统一基准
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Notes Made',
          style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
        ),
        Accordion(
          color: 0xffE69AF2,
          title: receiptData.getVisitType(),
          content: receiptData.getVisitDesc(),
        ),
        Accordion(
          color: 0xff9AF2AE,
          title: 'Doctor\'s Notes',
          content: receiptData.getDoctorNotes(),
        ),
        Text(
          'Receipt',
          style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
        ),
        Row(
          // 移除mainAxisSize: MainAxisSize.min，让Row占满宽度
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('consultation fee:'),
            Text(receiptData.getCFees().toString()),
          ],
        ),
        RatingBar.builder(
          initialRating: receiptData.getRating(),
          ignoreGestures: true,
          minRating: 1,
          direction: Axis.horizontal,
          allowHalfRating: true,
          itemCount: 5,
          itemPadding: const EdgeInsets.symmetric(horizontal: 4.0),
          itemBuilder: (context, _) => const Icon(
            Icons.star,
            color: Colors.amber,
          ),
          onRatingUpdate: (rating) {
            print(receiptData.getRating());
          },
        ),
      ],
    ),
  ),
)

额外说明 #

如果Accordion组件本身有默认内边距，需确保Container的内边距和它匹配，保证整体对齐更统一。另外移除了Text的textAlign: TextAlign.left，因为在CrossAxisAlignment.start的Column下，Text默认会左对齐，无需额外设置。

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