如何對齊 Flutter 中的多行？

Question

設想

有一欄。

此欄中有 4 個孩子

前 2 個是行（R1 和 R2）

第三個是分頻器

最后是一行（R3）

每行包含一個文本，該文本應擴展左側的所有可用空間，以及一個子行，每個子行包含 3 個動態寬度的子行。 這 3 個孩子應該與 R1、R2 和 R3 中的其他孩子對齊（在垂直軸上）。

問題

子行的子行不對齊，如下面的屏幕截圖所示

題

如何讓R1、R2、R3中子行的子行對齊？

最長的動態孩子應該決定寬度

可重現的代碼：（提示只需在 dartpad.dev 上復制粘貼並點擊運行）

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
           Row(
            children: [
              Expanded(child: Text('Main Balance')),
              Row(
                children: [
                  Text('350 Rs'),
                  Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                  Text('35000 USD'),
                ],
              ),
            ],
          ),

          Row(
            children: [
              Expanded(child: Text('Credit Balance')),
              Row(
                children: [
                  Text('350 Rs'),
                  Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                  Text('35 USD'),
                ],
              ),
            ],
          ),
          Divider(),
          Row(
            children: [
              Expanded(child: Text('Total')),
              Row(
                children: [
                  Text('350 Rs'),
                  Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                  Text('35000000 USD'),
                ],
              ),
            ],
          ),
      ]
    );
  }
}

試圖

我嘗試使用 3 列而不是一行，但后來我遇到了另一個問題，我應該把分隔線放在哪里？

Answer 1

試試這個：

使用Table小部件，您可以根據需要進行自定義

Table(
        columnWidths: {2: FlexColumnWidth(0.2)},
        children: [
          TableRow(children: [
            Text('Main Balance'),
            Text('350 Rs'),
            Text('->'),
            Text('35000 USD'),
          ]),
          TableRow(children: [
            Text('Credit Balance'),
            Text('350 Rs'),
            Text('->'),
            Text('35 USD'),
          ]),
          TableRow(children: [
            Divider(),
            Divider(),
            Divider(),
            Divider(),
          ]),
          TableRow(children: [
            Text('Total'),
            Text('350 Rs'),
            Text('->'),
            Text('35000000 USD'),
          ]),
        ],
      ),

結果代碼是：

Answer 2

使用 DataTable 小部件來顯示您的數據

class MyWidget extends StatelessWidget {
    @override
Widget build(BuildContext context) {
return SafeArea(
  child: DataTable(
    columns: [
      DataColumn(label: Text('Explain')),
      DataColumn(label: Text('Column 1')),
      DataColumn(label: Text('Column 2')),
    ],
    rows: [
      DataRow(cells: [
        DataCell(Text('Main Balance')),
        DataCell(Text('350 Rs')),
        DataCell(Text('35000 USD')),
      ]),
      DataRow(cells: [
        DataCell(Text('Credit Balance')),
        DataCell(Text('350 Rs')),
        DataCell(Text('35 USD')),
      ]),
      DataRow(cells: [
        DataCell(Text('Total')),
        DataCell(Text('350 Rs')),
        DataCell(Text('35000000 USD')),
      ]),
    ],
  ),
);

} }

Answer 3

試試這個解決方案。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: [
          Expanded(flex: 1, child: Text('Main Balance')),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Text('350 Rs'),
                ),
                Expanded(
                  child: Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
                Expanded(
                  child: Text('35000 USD', textAlign: TextAlign.end),
                ),
              ],
            ),
          ),
        ],
      ),
      Row(
        children: [
          Expanded(flex: 1, child: Text('Credit Balance')),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Text('350 Rs'),
                ),
                Expanded(
                  child: Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
                Expanded(
                  child: Text('35 USD', textAlign: TextAlign.end),
                ),
              ],
            ),
          ),
        ],
      ),
      Divider(),
      Row(
        children: [
          Expanded(flex: 1, child: Text('Total')),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Text('350 Rs'),
                ),
                Expanded(
                  child: Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
                Expanded(
                  child: Text('35000000 USD', textAlign: TextAlign.end),
                ),
              ],
            ),
          ),
        ],
      ),
    ]);
  }
}