【发布时间】：2021-12-02 08:08:49
【问题描述】：
我正在尝试使用具有多行和多列的 Flutter 构建布局，如下所示。我已经部分实现了，但样式与屏幕截图中的不同，而且我不确定我使用的小部件是否在布局标准方面是最好的。
我们如何在 Flutter 中实现这种风格？需要对代码进行任何更改吗？
代码：
pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: <pw.Widget>[
pw.Container(
padding: const pw.EdgeInsets.only(left: 20, bottom: 20),
child: pw.Column(
children: <pw.Widget>[
pw.Text('Header',
textScaleFactor: 2,
style: pw.Theme.of(context)
.defaultTextStyle
.copyWith(fontWeight: pw.FontWeight.bold)),
pw.Padding(padding: const pw.EdgeInsets.only(top: 10)),
pw.Padding(padding: const pw.EdgeInsets.only(top: 20)),
pw.Row(
crossAxisAlignment: pw.CrossAxisAlignment.start,
mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
children: <pw.Widget>[
pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: <pw.Widget>[
pw.Text(
'*YAT5869507*',
style: const pw.TextStyle(
fontSize: SharedFontSizes.headline3Mobile,
),
),
pw.Text('Code :'),
pw.Text('Name :'),
pw.Text('Expected Date :'),
pw.Text('Receipt Date :'),
pw.Text('Number :'),
],
),
pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: <pw.Widget>[
pw.Text('ABEL'),
pw.Text('ABEL New'),
pw.Text('_______________'),
pw.Text('_______________'),
pw.Text('_______________'),
],
),
pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: <pw.Widget>[
pw.Text('ID :'),
pw.Text('Time'),
pw.Text('Start Time :'),
pw.Text('End Time :'),
],
),
pw.Column(
crossAxisAlignment: pw.CrossAxisAlignment.start,
children: <pw.Widget>[
pw.Text('_______________'),
pw.Text('_______________'),
pw.Text('_______________'),
pw.Text('_______________'),
],
),
],
),
],
),
),
],
);
【问题讨论】：
-
看起来两者都一样。你对截图还有什么期待？
标签： flutter dart flutter-layout