flutter - 如何在 Flutter 中将小部件高度填充到父级(或获取父级大小)？

Question

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

item的高度由它的children高度自动决定，item的第一个children(下面的deepOrange Container)高度依赖于parent item的高度(不是ListView的item)，它的高度必须填充到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(...));