Блог

Главная - Вопросы по программированию - Flutter — как развернуть контейнер в строке, чтобы он соответствовал контейнеру в следующей строке?

Flutter — как развернуть контейнер в строке, чтобы он соответствовал контейнеру в следующей строке?

#flutter #layout #flexbox

#flutter #макет #flexbox

Вопрос:

Я прошу вас помочь с компоновкой в Flutter с помощью виджетов Flex и Expand. Я привел простой пример, чтобы показать, чего я хочу и что я получаю.

Моя цель — создать столбец с 2 строками. В каждой строке должно быть 2 блока. Блоки № 2 должны находиться в том же левом положении.

Это то, что я хочу получить.

1) Это мой код для столбцов и строк:

 Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              decoration: BoxDecoration(color: Colors.orange),
              child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Container(
                    decoration: BoxDecoration(color: Colors.greenAccent),
                    child: Text("Short", style: TextStyle(fontSize: 20))),
                Container(
                    decoration: BoxDecoration(color: Colors.amberAccent),
                    child: Text("Text-2", style: TextStyle(fontSize: 20))),
              ])),
          Container(
              decoration: BoxDecoration(color: Colors.orange),
              child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Container(
                    decoration: BoxDecoration(color: Colors.greenAccent),
                    child: Text("Long block", style: TextStyle(fontSize: 20))),
                Container(
                    decoration: BoxDecoration(color: Colors.amberAccent),
                    child: Text("Text-2", style: TextStyle(fontSize: 20))),
              ])),
        ]);

Это то, что я получаю:
введите описание изображения здесь

2) Это мой код для Flex:

 Widget build(BuildContext context) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: <
        Widget>[
      Container(
          decoration: BoxDecoration(color: Colors.orange),
          child: Flex(
              direction: Axis.horizontal,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Flex(
                    direction: Axis.horizontal,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Container(
                          decoration: BoxDecoration(color: Colors.greenAccent),
                          child: Text("Short", style: TextStyle(fontSize: 20)))
                    ]),
                Container(
                    decoration: BoxDecoration(color: Colors.amberAccent),
                    child: Text("Text-2", style: TextStyle(fontSize: 20))),
              ])),
      Container(
          decoration: BoxDecoration(color: Colors.orange),
          child: Flex(
              direction: Axis.horizontal,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                    decoration: BoxDecoration(color: Colors.greenAccent),
                    child: Text("Long block", style: TextStyle(fontSize: 20))),
                Container(
                    decoration: BoxDecoration(color: Colors.amberAccent),
                    child: Text("Text-2", style: TextStyle(fontSize: 20))),
              ])),
    ]);

Это то, что я получаю с помощью Flex:
Это то, что я получаю с помощью Flex

3) Это мой код для расширенного:

 Widget build(BuildContext context) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: <
        Widget>[
      Container(
          decoration: BoxDecoration(color: Colors.orange),
          child: Flex(
              direction: Axis.horizontal,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                    child: Container(
                        decoration: BoxDecoration(color: Colors.greenAccent),
                        child: Text("Short", style: TextStyle(fontSize: 20)))),
                Container(
                    decoration: BoxDecoration(color: Colors.amberAccent),
                    child: Text("Text-2", style: TextStyle(fontSize: 20))),
              ])),
      Container(
          decoration: BoxDecoration(color: Colors.orange),
          child: Flex(
              direction: Axis.horizontal,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                    decoration: BoxDecoration(color: Colors.greenAccent),
                    child: Text("Long block", style: TextStyle(fontSize: 20))),
                Container(
                    decoration: BoxDecoration(color: Colors.amberAccent),
                    child: Text("Text-2", style: TextStyle(fontSize: 20))),
              ])),
    ]);

Это то, что я получаю с расширенным:
Это то, что я получаю с расширенным

Пожалуйста, помогите мне создать правильную иерархию виджетов, чтобы получить то, что на первой картинке. Спасибо!

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

1. Требуется ли вам использовать этот тип макета? Вы можете получить то, что хотите, если будете использовать одну строку с двумя столбцами внутри нее, вместо одного столбца с двумя строками.

2. Большое спасибо! Это помогает мне в моем примере.

3. В моей реальной задаче у меня есть одна строка для одной записи из моей базы данных. Конечно, я могу решить это с помощью иерархии строк — столбцов. Но я хочу научиться растягивать контейнер, как на моем первом рисунке. В HTML CSS я могу использовать div(flex-direction: столбец) — 2 divs (flex-direction: строка) — div (flex-grow: 1) amp; div (без flex-grow).

4. Чтобы иметь сетку, используйте таблицу. Это сделает строки достаточно глубокими для самого высокого элемента, а столбцы достаточно широкими для самого большого элемента в столбце.

5. Рэндал Шварц, большое спасибо. Таблица работает отлично. Также я обернул его в Flex и использовал «defaultColumnWidth: IntrinsicColumnWidth ()» для его сжатия.