如何在 Flutter 中将小部件高度填充到父级（或获取父级大小）？

Question

我是 Flutter 的新手，我的 ListView 有问题。我的ListView 包含很多item，ListView 的item 包括问题内容和一些用户的cmets。

item的高度由它的children高度自动决定，item的第一个children（下面的deepOrange Container）高度依赖于父item的高度（不是ListView的item），它的高度必须是fill to parent项目。

ListView 的项目大小取决于其子项目的大小， 项目中的第一个小部件（下面的容器）也依赖于父项目。

我该怎么做？

非常非常抱歉，英语不是我的灵长类语言，我的英语很差。这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class MainPage extends StatefulWidget {
  const MainPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var items = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: items.map((item) => Row(
          /*I can't compute the real rendered height of the item by it's children content, because it's possible contain many replay message, different font size etc.*/
          children: <Widget>[
            Container(
              width: 5.0,
              /**
               * I want to fill the height to parent widget of the container,
               * (I want to make an timeline widget, it's should max height to its parent.)
               * but i can't get parent items size, or double.infinity etc,
               */
              height: 80.0, // How to fill the height to parent of the property? or how to get parent item size (or actually rendered height)?
              color: Colors.deepOrange,
            ),
            SizedBox(width: 10.0,),
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text("there is long comment of users, there is long comment of users, there is long comment of users, there is long comment of users, there is long comment of users, $item"),
                  /*
                  Also here is a lists of replay message by another user.
                  * */
                  Column(children: <Widget>[
                    Text("replay 1"),
                    Text("replay 2"),
                    Text("replay 3"),
                    Text("replay N"),
                  ],),
                  Row(
                    children: <Widget>[
                      IconButton(icon: Icon(Icons.favorite)),
                      IconButton(icon: Icon(Icons.delete)),
                      IconButton(icon: Icon(Icons.message)),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),).toList(),
      ),
    );
  }
}

我只是想让紫色容器的高度适合父容器。 提前谢谢你。

Answer 1

将您的列表包装在一个容器中。然后将高度设置为屏幕尺寸。您可以通过 MediaQuery 获取。

var screenSize = MediaQuery.of(context).size;
Container(
   height: screenSize.height,
   width: screenSize.width,
   child: ListView(...));