有没有办法在flutter中创建类似pdf的表单布局？

Question

我想知道我可以制作这样的文本布局吗？冒号彼此对齐，值也彼此对齐。我尝试使用固定宽度的容器，行之间有空间作为子项，但值部分未对齐，有什么想法吗？

Column(
 children: [
  Container(
   width: MediaQuery.of(context).size.width * .4
   child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
     Text('Jenis Layanan'),
     Text(':')
    ]
   )
  )
 ]
)

Answer 1

是的，你可以。我个人在这种情况下使用

Table

。

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  /// Table row widget
  TableRow buildTableRow(String title, String value) {
    return TableRow(
      children: [
        // This widget is for the value of first column
        Padding(
          padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
          child: Text(
            title,
          ),
        ),
        // This widget is for the value of second column
        Padding(
          padding: const EdgeInsets.all(4),
          child: Text(': $value'),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // Creating table
          child: Table(
            // The [columnWidths] value must be equal with the total column of [buildTableRow]
            columnWidths: const {
              // Creates the first column width based on intrinsic sizing.
              0: IntrinsicColumnWidth(),
              // The second column take all the remaining space.
              1: FlexColumnWidth(),
            },
            // This is where to put the [TableRow]
            children: [
              buildTableRow('Jenis Layanan', 'Tarik Tunai'),
              buildTableRow('Bank Tujuan', 'BRI'),
              buildTableRow('No Rekening', '0129319201'),
              buildTableRow('Nama Pemilik Rekening', 'Adam'),
              buildTableRow('Nominal', 'Rp. 10.000'),
            ],
          ),
        ),
      ),
    );
  }
}

这是输出：