ListView的动态高度

Question

我正在开发 Flutter 应用程序，我想动态调整ListView的高度。

我希望列表的最大高度为function finalGrade(exam, projects) { if (exam >= 90 || projects > 10) { return 100; } else if (exam >= 75 && projects === 5) { return 90; } else if (exam >= 50 && projects === 2) { return 75; } else { return 0; } } 。如果高度大于该高度，则用户将不得不滚动以到达底部。如果高度低于200，则仅占用所需的空间。

应用预览：Screenshot。如您所见，200被推到页面的最底部。我希望ListView的高度不超过Restaurants nearby，以使下面的内容不会被压到底部。

这是我当前的代码：

200

Answer 1

您正在使用Flexible小部件，这就是ListView展开的原因。您必须将Flexible更改为ConstrainedBox，并将shrinkWrap: true添加到ListView中。

     ConstrainedBox(
          constraints: BoxConstraints(maxHeight: 200, minHeight: 56.0),
          child: ListView.builder(
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.cyan,
                ),
                title: Text('Test restaurant'),
                subtitle: Text('80m'),
              );
            },
            itemCount: 15,
          ),
        ),

此处有更多信息：https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html

Answer 2

{{1}}

这会使您的孩子的身高不大于200.0

Answer 3

您可以使用LimitedBox

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(...),
    Divider(),
    Row(...),
    LimitedBox(
      maxHeight: 200.0,
      child: ListView.builder(...),
    ),
    Text(...),
  ],
),

当传入的约束不受限制时的推荐解决方案

Answer 4

考虑将ListView包装到其中

LimitedBox(
  maxHeight: 200,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Flexible(
        child: ListView.builder(
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.cyan,
              ),
              title: Text('Test restaurant'),
              subtitle: Text('80m'),
            );
          },
          itemCount: _itemsCount,
        ),
      ),
    ]
  )
),

请注意：

shrinkWrap中的
• ListView设置为true
mainAxisSize中的
• Column设置为MainAxisSize.min
maxHeight中的
• LimitedBox设置为200

完整的代码段：

import 'package:flutter/material.dart';

class DebugWidget extends StatefulWidget {
  @override
  _DebugWidgetState createState() => _DebugWidgetState();
}
class _DebugWidgetState extends State<DebugWidget> {
  int _itemsCount = 1;

  @override
  Widget build(BuildContext context) {
    Widget child = Container(
      padding: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Restaurants nearby',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('Enter restaurant manually'),
                onPressed: () {
                  print('Button pressed');
                },
              ),
              RaisedButton(
                child: Text('+1'),
                onPressed: () {
                  setState(() {
                    _itemsCount += 1;
                  });
                },
              ),
              RaisedButton(
                child: Text('-1'),
                onPressed: () {
                  setState(() {
                    _itemsCount -= 1;
                  });
                },
              ),
            ],
          ),
          LimitedBox(
            maxHeight: 200,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Flexible(
                  child: ListView.builder(
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        leading: CircleAvatar(
                          backgroundColor: Colors.cyan,
                        ),
                        title: Text('Test restaurant'),
                        subtitle: Text('80m'),
                      );
                    },
                    itemCount: _itemsCount,
                  ),
                ),
              ]
            )
          ),
          Text(
            'Restaurants nearby',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );

    return Scaffold(
      body: child,
    );
  }
}

Answer 5

我找到了解决此问题的方法。您应该使用LimittedBox或ConstraintBox包装ListView并为其赋予maxHeight并将ListView的rinkleWrap属性设置为true。解决方案就是这样。

LimitedBox(
          maxHeight: 200,
          child: ListView.builder(
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.cyan,
                ),
                title: Text('Test restaurant'),
                subtitle: Text('80m'),
              );
            },
            itemCount: 15,
          ),
        ),

Answer 6

您始终可以将ListView容器的大小设置为视口的百分比（当然，假设其他小部件的大小也相同）：

return Container(
      height: MediaQuery.of(context).size.height * 0.75,
      child: ListView.builder(
        itemBuilder: (ctx, index) {
          return Card(...