为什么我的日期字段无法适应我的Flutter用户界面？

huangapple
go评论65阅读模式
英文:

Why is my date field not fitting into my Flutter UI?

问题

以下是代码的翻译部分：

我想制作这个设计（仅顶部部分）

这是我尝试过的内容

如您所见，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 ")],
              ),
            ],
          ))
        ]),
      ]),
    ));
  }
}

请注意，代码中的引号被转义以匹配代码的语法。如果您需要更多帮助或有其他问题，请随时提出。

英文:

I want to make this design (only the top part)

为什么我的日期字段无法适应我的Flutter用户界面？

This is what I have tried

为什么我的日期字段无法适应我的Flutter用户界面？

As you can see, dueDate is unable to show in full. What is the better way to write it? My code as below:

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

答案1

得分: 1

尝试在行（Rows）中的最后一列添加Expanded，例如：

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

我非常确定，如果您删除填充（padding），它将解决溢出问题。

英文:

try adding expanded in the Rows to the last column

example:

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

and i'm pretty sure that if you remove the padding it will fix the overflow problem

答案2

得分: 1

将上述代码中的注释和 HTML 实体转义字符翻译如下：

只需从最后一个`Row`中移除`Expanded`就可以正常工作：

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("发票"), 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("应付余额"),
                  Text("MYR 100"),
                ],
              ),
            ],
          ),
          const SizedBox(height: 15),
          const Text("收件人"),
          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("发票日期："),
                      Text("12 MAY ")
                    ],
                  ),
                  Row(
                    children: const [
                      Text("条款："),
                      Text("12 MAY "),
                    ],
                  ),
                  Row(
                    children: const [
                      Text("到期日期："),
                      Text("12 MAY "),
                    ],
                  ),
                ],
              )
            ],
          ),
        ],
      ),
    ),
  );
}

请注意，我已经将“INVOICE”和“#1111111111”这些文本从HTML实体字符转换为正常的文本。如果您有其他问题或需要进一步的帮助，请告诉我。

英文:

Just removing Expanded from last Row worked:

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

为什么我的日期字段无法适应我的Flutter用户界面？

答案3

得分: -1

使用这段代码：

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("发票"), 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("未付余额"), Text("MYR 100")],
          )
        ]),
        const SizedBox(height: 15),
        const Text("接收方"),
        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"),
          ),
          Expanded(
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: const [Text("发票日期:"), Text("12 MAY")],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: const [Text("条款:"), Text("12 MAY")],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment end,
                  children: const [Text("到期日:"), Text("12 MAY")],
                ),
              ],
            ),
          )
        ]),
      ]),
    ),
  );
}
英文:

Use this code

<!-- language: lang-dart -->

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(&quot;INVOICE&quot;), Text(&quot;#1111111111&quot;)],
            )),
        const Text(&quot;AAAAAAAA BBBBBBB CCCCCC&quot;),
        Row(children: [
          const Expanded(
              child: Text(&quot;164,Jalan Lang Perut 10, Selangor, Malaysia&quot;)),
          const Spacer(),
          Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: const [Text(&quot;Balance Due&quot;), Text(&quot;MYR 100&quot;)])
        ]),
        const SizedBox(height: 15),
        const Text(&quot;Receipient&quot;),
        const SizedBox(height: 15),
        const Text(&quot;DDDD DDDDD DDDDD&quot;),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          const Expanded(
              child: Text(&quot;124,Jalan Lang Perut 5, Selangor, Malaysia&quot;)),
          // const Spacer(),
          Expanded(
              child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text(&quot;Invoice Date:&quot;), Text(&quot;12 MAY &quot;)],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text(&quot;Termas:&quot;), Text(&quot;12 MAY &quot;)],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [Text(&quot;Due Date:&quot;), Text(&quot;12 MAY &quot;)],
              ),
            ],
          ))
        ]),
      ]),
    ));
  }

huangapple
  • 本文由 发表于 2023年2月24日 13:41:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/75552984.html
  • flutter
  • row
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定