我想做这个设计(只有顶部)
这是我试过的
如您所见,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 ")],
),
],
))
]),
]),
));
}
}
尝试在行中添加扩展到最后一列
例子:
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 ")
],
),
),
],
),
而且我很确定,如果您删除填充,它将解决溢出问题
只需从最后一个
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 "),
],
),
],
)
],
),
],
),
),
);
}
使用此代码
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 ")],
),
],
))
]),
]),
));
}