Как разместить контейнер в ряд

Question

Я собираюсь задать вопрос о флаттере.

Глядя на захват, я хочу, чтобы высота левого и правого контейнеров соответствовала высоте более длинного контейнера.

Поскольку мы должны соответствовать большей высоте, мы хотим реализовать ее таким образом, чтобы она не объявляла высоту.

Я надеюсь, что кто-то может помочь мне решить эту проблему.

Спасибо.

это захват

это мой код

import 'package:flutter/material.dart';

class RowTest extends StatefulWidget {
  @override
  _RowTestState createState() => _RowTestState();
}

class _RowTestState extends State<RowTest> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('simple Page'),
            ),
            body: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Container(
                          child: Column(
                        children: <Widget>[
                          for (int i = 0; i < 5; i++)
                            Row(
                              children: <Widget>[
                                Container(
                                  width: 141,
                                  margin: EdgeInsets.fromLTRB(size.width * 0.1,
                                      8, size.width * 0.05, 8),
                                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Color(0xff939393),
                                    ),
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(5)),
                                  ),
                                  child: Center(
                                    child: Text(
                                      'testededed',
                                      textAlign: TextAlign.center,
                                      textScaleFactor: 1.0,
                                      style: TextStyle(
                                          fontSize: 16,
                                          height: 1.5,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 141,
                                  margin: EdgeInsets.fromLTRB(size.width * 0.05,
                                      8, size.width * 0.1, 8),
                                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Color(0xff939393),
                                    ),
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(5)),
                                  ),
                                  child: Center(
                                    child: Text(
                                      'testesttaaaaaaaaaaaaest',
                                      textAlign: TextAlign.center,
                                      textScaleFactor: 1.0,
                                      style: TextStyle(
                                          fontSize: 16,
                                          height: 1.5,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ],
                            )
                        ],
                      )),
                    ],
                  ),
                )
              ],
            )));
  }
}

Answer 1

Если вы используете: Row (с mainAxisSize max)> Expanded> Container, контейнер поместится во всю строку

Если вы используете: Column> Expanded> Container, контейнер поместится во весь столбец

Если вы используете: Столбец> Строка (с mainAxisSize max)> Расширенный> Контейнер, Контейнер, Контейнер, 3 контейнера поместятся во всю строку с одинаковой шириной

Если вы используете: Scaffold> Stack (с помощью fit> StackFit.expand)> Expanded> Container, стек будет пытаться уместить весь каркас, а контейнер уместится в стек

Answer 2

Прошу прощения за задержку в ответе, потому что у меня несколько совпадений.

Я решил это с помощью IntrinsicHeight .

Спасибо всем, кто помог с комментарии.

class RowTest extends StatefulWidget {
  @override
  _RowTestState createState() => _RowTestState();
}

class _RowTestState extends State<RowTest> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('simple Page'),
            ),
            body: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Container(
                          child: Column(
                        children: <Widget>[
                          for (int i = 0; i < 5; i++)
                            IntrinsicHeight(
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    width: 141,
                                    margin: EdgeInsets.fromLTRB(
                                        size.width * 0.1,
                                        8,
                                        size.width * 0.05,
                                        8),
                                    padding:
                                        EdgeInsets.fromLTRB(10, 10, 10, 10),
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        color: Color(0xff939393),
                                      ),
                                      color: Colors.red,
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                    ),
                                    child: Center(
                                      child: Text(
                                        'testededed',
                                        textAlign: TextAlign.center,
                                        textScaleFactor: 1.0,
                                        style: TextStyle(
                                            fontSize: 16,
                                            height: 1.5,
                                            color: Colors.white),
                                      ),
                                    ),
                                  ),
                                  Container(
                                    width: 141,
                                    margin: EdgeInsets.fromLTRB(
                                        size.width * 0.05,
                                        8,
                                        size.width * 0.1,
                                        8),
                                    padding:
                                        EdgeInsets.fromLTRB(10, 10, 10, 10),
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        color: Color(0xff939393),
                                      ),
                                      color: Colors.red,
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                    ),
                                    child: Center(
                                      child: Text(
                                        'testesttaaaaaaaaaaaaest',
                                        textAlign: TextAlign.center,
                                        textScaleFactor: 1.0,
                                        style: TextStyle(
                                            fontSize: 16,
                                            height: 1.5,
                                            color: Colors.white),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            )
                        ],
                      )),
                    ],
                  ),
                )
              ],
            )));
  }
}

Answer 3

Используйте crossAxisAlignment: CrossAxisAlignment.start для вашего Root Column Дерева

     Column(
              crossAxisAlignment: CrossAxisAlignment.start,