Flutter发票页面日期字段无法完整显示的问题求助

我想要实现目标样式的页面顶部设计，当前实现效果中Due Date字段无法完整显示，请问该如何优化代码？

我的代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

import '../domain/model/invoice.dart';

class InvoiceDetailsScreen extends HookWidget {
  final Invoice invoice;

  const InvoiceDetailsScreen(this.invoice, {super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _showDetails(),
      appBar: AppBar(elevation: 0, title: const Text("Invoice")),
    );
  }

  Widget _showDetails() {
    return SingleChildScrollView(
        child: Padding(
      padding: const EdgeInsets.all(10),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Align(
            alignment: Alignment.topRight,
            child: Column(
              children: [const Text("INVOICE"), const Text("#1111111111")],
            )),
        const Text("AAAAAAAA BBBBBBB CCCCCC"),
        Row(children: [
          const Expanded(
              child:
                  Text("164,Jalan Lang Perut 10, Selangor, Malaysia")),
          const Spacer(),
          Column(children: [const Text("Balance Due"), const Text("MYR 100")])
        ]),
        const SizedBox(height: 15),
        const Text("Receipient"),
        const SizedBox(height: 15),
        const Text("DDDD DDDDD DDDDD"),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          const Expanded(
              child:
                  Text("124,Jalan Lang Perut 5, Selangor, Malaysia")),
          const Spacer(),
          Expanded(
              child: Column(
            children: [
              Row(
                children: [const Text("Invoice Date:"), const Text("12 MAY ")],
              ),
              Row(
                children: [const Text("Termas:"), const Text("12 MAY ")],
              ),
              Row(
                children: [const Text("Due Date:"), const Text("12 MAY ")],
              ),
            ],
          ))
        ]),
      ]),
    ));
  }
}

优化方案 #

问题核心在于收件人信息行的Row布局不合理，多余的Spacer和未分配的空间挤压了右侧日期列的显示区域。以下是调整后的代码：

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

import '../domain/model/invoice.dart';

class InvoiceDetailsScreen extends HookWidget {
  final Invoice invoice;

  const InvoiceDetailsScreen(this.invoice, {super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _showDetails(),
      appBar: AppBar(elevation: 0, title: const Text("Invoice")),
    );
  }

  Widget _showDetails() {
    return SingleChildScrollView(
        child: Padding(
      padding: const EdgeInsets.all(10),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        // 右上角发票编号区域，改为右对齐
        Align(
            alignment: Alignment.topRight,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [const Text("INVOICE"), const Text("#1111111111")],
            )),
        const SizedBox(height: 8),
        const Text("AAAAAAAA BBBBBBB CCCCCC"),
        const SizedBox(height: 4),
        // 顶部地址与余额行，移除Spacer用spaceBetween分配空间
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Text(
                "164,Jalan Lang Perut 10, Selangor, Malaysia",
                softWrap: true,
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [const Text("Balance Due"), const Text("MYR 100")],
            )
          ],
        ),
        const SizedBox(height: 15),
        const Text("Receipient"),
        const SizedBox(height: 15),
        const Text("DDDD DDDDD DDDDD"),
        const SizedBox(height: 4),
        // 收件人地址与日期行，用flex分配空间比例
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              flex: 2, // 左侧地址占2份空间
              child: Text(
                "124,Jalan Lang Perut 5, Selangor, Malaysia",
                softWrap: true,
              ),
            ),
            Expanded(
              flex: 1, // 右侧日期占1份空间
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      const Expanded(child: Text("Invoice Date:")),
                      Text("12 MAY"),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Row(
                    children: [
                      const Expanded(child: Text("Terms:")), // 修正拼写错误Termas→Terms
                      Text("12 MAY"),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Row(
                    children: [
                      const Expanded(child: Text("Due Date:")),
                      Text("12 MAY"),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ]),
    ));
  }
}

关键优化点 #

1. 移除多余的Spacer，用MainAxisAlignment.spaceBetween控制Row内元素的空间分布
2. 给左右区域添加flex属性，灵活分配空间，避免某一侧被过度挤压
3. 右侧日期列设置CrossAxisAlignment.start，让文本左对齐，避免错位
4. 给长文本添加softWrap: true，确保内容可以自动换行
5. 修正原代码中的拼写错误Termas→Terms
6. 添加适当的SizedBox调整元素间距，提升布局美观度

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