Question

我有几个 Row 元素。每个 Row 包含一些 Container 元素。我希望将 Container 元素扩展到 Row 的当前高度。

例如：在最后一个 Row 中，我希望所有子元素都具有元素 87 的高度。

我尝试了很多：

容器 height 到 double.infinity
容器 constraints 到 BoundContraints.expand()
使用 IntrinsicHeight()：

内在高度( 孩子：行（ crossAxisAlignment: CrossAxisAlignment.stretch, 儿童：myContainers ) )

然而，所有这些方法都会产生异常，因为整个高度升至无穷大或 - 在 IntrinsicHeight 方法返回的情况下

<块引用>

LayoutBuilder 不支持返回内部尺寸。

我猜，这是因为我没有为整个工具设置明确的 maxHeight。

所以，我想保留实际的 Row 高度，但想扩展其子项。

提前致谢

Answer 1

你考虑过桌子吗？看起来是对的。

Answer 2

还有更多的方法。你可以用固定大小的容器包裹你的行，像这样。Width 获取当前设备宽度。

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

OR 你可以这样创建。这里我使用 device width/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)),
    );
  }
}

在这里检查结果。 final result

将容器高度调整为一行中子项的最大高度

2 个答案: