Блог

Главная - Вопросы по программированию - Как выровнять несколько строк в Flutter?

Как выровнять несколько строк в Flutter?

#flutter #dart

#flutter #dart

Вопрос:

Сценарий

Есть столбец.

В этом столбце 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 столбца вместо одной строки, но затем столкнулся с другой проблемой: КУДА мне ПОМЕСТИТЬ РАЗДЕЛИТЕЛЬ?

Комментарии:

1. Почему бы не использовать таблицу, api.flutter.dev/flutter/widgets/Table-class.html

2. @faroukosama тоже это уже пробовал, таблица заставляет всю ширину быть одинаковой. Таким образом, текст слева не будет занимать все доступное пространство

Ответ №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'),
          ]),
        ],
      ),

результирующий код:

введите описание изображения здесь

Ответ №2:

Попробуйте это решение.

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

Ответ №3:

используйте виджет 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')),
      ]),
    ],
  ),
);

}
}