需要 UI 设计方面的帮助

Question

我想做这个设计（只有顶部）

这是我试过的

如您所见，dueDate 无法完整显示。什么是更好的写法？我的代码如下：

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 ")],
                  ),
                ],
              ))
            ]),
          ]),
        ));
      }
    }

---

非常感谢

("hfuewifheuiwiwuihecscsacsacscscsacscscscscsacwiufheuifhewifhewifhifh") // 请忽略此行

Answer 1

尝试在行中添加扩展到最后一列

例子：

                             Column(
                                children: [
                                  Expanded(
                                    child: Row(
                                      children: [
                                        const Text("Invoice Date:"),
                                        const Text("12 MAY ")
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Row(
                                      children: [
                                        const Text("Termas:"),
                                        const Text("12 MAY ")
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Row(
                                      children: [
                                        const Text("Due Date:"),
                                        const Text("12 MAY ")
                                      ],
                                    ),
                                  ),
                                ],
                              ),

而且我很确定，如果您删除填充，它将解决溢出问题

Answer 2

 **Use this code**

 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"), Text("#1111111111")],
            )),
        const Text("AAAAAAAA BBBBBBB CCCCCC"),
        Row(children: [
          const Expanded(
              child: Text("164,Jalan Lang Perut 10, Selangor, Malaysia")),
          const Spacer(),
          Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: const [Text("Balance Due"), 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(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text("Invoice Date:"), Text("12 MAY ")],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text("Termas:"), Text("12 MAY ")],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text("Due Date:"), Text("12 MAY ")],
              ),
            ],
          ))
        ]),
      ]),
    ));
  }

Answer 3

只需从最后一个

Expanded

中删除

Row

即可：

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"), 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"),
                    Text("MYR 100"),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 15),
            const Text("Receipient"),
            const SizedBox(height: 15),
            const Text("DDDD DDDDD DDDDD"),
            Row(
              children: [
                const Expanded(
                  child: Text("124,Jalan Lang Perut 5, Selangor, Malaysia"),
                ),
                const Spacer(),
                Column(
                  children: [
                    Row(
                      children: const [
                        Text("Invoice Date:"),
                        Text("12 MAY ")
                      ],
                    ),
                    Row(
                      children: const [
                        Text("Termas:"),
                        Text("12 MAY "),
                      ],
                    ),
                    Row(
                      children: const [
                        Text("Due Date:"),
                        Text("12 MAY "),
                      ],
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }