Блог

У меня есть несколько Row элементов. Каждый Row содержит несколько Container элементов. Я хочу Container , чтобы элементы были расширены до текущей высоты Row .

Например: в последнем Row я хочу, чтобы все дочерние элементы имели высоту элемента 87 .

Я много пробовал:

• Контейнер height для double.infinity
• Контейнер constraints для BoundContraints.expand()
• Использование IntrinsicHeight() :

  Внутренняя высота ( дочерний элемент: строка( Выравнивание поперечной оси: выравнивание поперечной оси.растяжение, дочерние элементы: myContainers ) )

Однако все эти подходы приводят к исключениям, поскольку вся высота увеличивается до бесконечности или — в случае IntrinsicHeight возврата подхода

LayoutBuilder не поддерживает возврат внутренних размеров.

Я думаю, это потому, что у меня нет явного набора maxHeight для всего инструмента.

Итак, я хочу сохранить фактическую Row высоту, но хочу расширить ее дочерние элементы.

Заранее спасибо

Вы рассматривали таблицу? Похоже, это правильно.

Есть и другие подходы.Вы можете обернуть свою строку контейнером фиксированного размера следующим образом.Width возвращает текущую ширину устройства.

 Container(
  width:MediaQuery.of(context).size.width,
  height:87,
  Row(
    children:[]
  )
)
 

ИЛИ вы можете создать так.Здесь я использовал ширину устройства / 20 в качестве размера контейнера, или вы можете настроить его, используя свою собственную ширину.

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.blue),
        debugShowCheckedModeBanner: false,
        home: Answer());
  }
}

class Answer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: 10,
          ),
          Row(
            children: [
              SizedBox(width: 10),
              RowItem(
                count: '1',
                txt: "H",
              ),
              Spacer(),
              RowItem(
                count: '2',
                txt: "He",
              ),
              SizedBox(width: 10),
            ],
          ),
          Row(
            children: [
              SizedBox(width: 10),
              RowItem(
                count: '3',
                txt: "Li",
              ),
              RowItem(
                count: '4',
                txt: "Be",
              ),
              Spacer(),
              RowItem(
                count: '5',
                txt: "B",
              ),
              RowItem(
                count: '6',
                txt: "C",
              ),
              RowItem(
                count: '7',
                txt: "N",
              ),
              RowItem(
                count: '8',
                txt: "O",
              ),
              RowItem(
                count: '9',
                txt: "F",
              ),
              RowItem(
                count: '10',
                txt: "Ne",
              ),
              SizedBox(width: 10),
            ],
          ),
          Row(
            children: [
              SizedBox(width: 10),
              RowItem(
                count: '11',
                txt: "Na",
              ),
              RowItem(
                count: '12',
                txt: "Mg",
              ),
              Spacer(),
              RowItem(
                count: '13',
                txt: "Al",
              ),
              RowItem(
                count: '14',
                txt: "Si",
              ),
              RowItem(
                count: '15',
                txt: "P",
              ),
              RowItem(
                count: '16',
                txt: "S",
              ),
              RowItem(
                count: '17',
                txt: "Cl",
              ),
              RowItem(
                count: '18',
                txt: "Ar",
              ),
              SizedBox(width: 10),
            ],
          ),
        ],
      ),
    );
  }
}

class RowItem extends StatelessWidget {
  final String txt;
  final String count;
  RowItem({@required this.txt, @required this.count});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 87,
      width: MediaQuery.of(context).size.width / 20,
      child: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(count),
          SizedBox(
            height: 2,
          ),
          Text(txt)
        ],
      )),
      decoration: BoxDecoration(border: Border.all(color: Colors.blue)),
    );
  }
}
 

проверьте результат здесь.
конечный результат