Question

我希望能够在卡片中放置一个ListView，并且卡片的高度将由ListView的高度决定（稍后我会将列表限制为x项目，以便赢得＆＃如果有很多物品，请占据整个空间。

这是我写的一个例子，它说明了＆＃34;挑战＆＃34;，请参阅ListView.builder（）下面的注释：

import 'package:flutter/material.dart';

void main() => runApp(new MyExample());

class MyExample extends StatelessWidget {
  final List<int> _data = [1, 2, 3, 4, 5, 6, 7];

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(title: new Text('Example')),
        body: new Container(
          child: new Column(
            children: <Widget>[
              new Card(
                child: new SizedBox(
                  height: 100.0,
                  width: 440.0,
                  child: new Center(
                    child: new Text('First card'),
                  ),
                ),
              ),
              new Card(
                child: new SizedBox(
                  child: new ListView.builder(
                    itemBuilder: (BuildContext context, int index) =>
                        new MyExampleListItemWidget(_data[index]),
                    itemCount: _data.length,
                  ),
                  /// This is the one I want to be dynamic. The more items there are the more space it takes and the less space section 3 gets.
                  height: 100.0,
                ),
              ),
              new Flexible(
                child: new Center(
                  child: new Text('The third section'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyExampleListItemWidget extends StatelessWidget {
  final int _index;

  MyExampleListItemWidget(this._index) : super();

  @override
  Widget build(BuildContext context) {
    return new Padding(
        padding: new EdgeInsets.all(5.0),
        child: new Text('Text ' + _index.toString()));
  }
}

Answer 1

好的，答案很晚，但是如果人们仍然在寻找某种解决方案。可能有很多方法可以执行此操作，但是要根据OP的样本/要求来构建，关键是将其与ListView的shrinkWrap属性结合在一起。简化示例：

Card(
  child: SizedBox(
    height: _boxHeight,
    child: ListView.builder(
      shrinkWrap: _shrinkWrap,
      controller: _controller,
      itemCount: _myList.length,
      itemBuilder: (context, index) {
        return _myList[index];
      }),
  )
),

在initState()中，您将根据某些条件（例如列表中的最小项数）来初始化SizedBox的最小高度：

if (_myList.length <= listMinSize) {
  _boxHeight = minBoxHeight;
  _shrinkWrap = false;
}

然后，只要列表增加，您都将检查条件以启用shrinkWrap或设置框的最大高度。

setState(() {
  listChanged();

  if (_myList.length > listMaxSize) { // lock box height, disable shrinkWrap
    _boxHeight = maxBoxHeight;
    _shrinkWrap = false;
  } else if (_myList.length > listMinSize) { // unconstrain box height, enable shrinkWrap
    _boxHeight = null;
    _shrinkWrap = true;
  } // can also check if it ever returns to listMinSize
});

简而言之，这将使您的Card/SizedBox从minBoxHeight开始，与ListView一起成长，直到到达listMaxSize，并锁定在maxBoxHeight，届时它将具有滚动行为。

现在，如果要确保最小/最大boxHeights与列表项很好地对齐，那么这又是另一个问题，您需要在其中计算列表项小部件的大小及其列表偏移量。 / p>

卡的动态高度

1 个答案: