Question

我正在为ListView而苦苦挣扎。我的问题是我在另一个Listview中有一个Listview，第二个Listview的高度并不总是相同。我想摆脱itemExtent并为第一个Listview创建一个自动高度。

我真正想要完成的事情是这样的：

  @override
  Widget build(BuildContext context) {
    return
      Column(
        children: <Widget>[
          TextField(),
          Expanded(
            child: ListView.builder(
              key: new Key("ditisdekeyvoordelistview"),
              itemBuilder: _makeMovieList,
              padding: EdgeInsets.all(0.0),
              itemCount: _movies.length,
              itemExtent: 300.0,
            ),
          ),
        ],
      );
  }
//FIRST LIST
  Widget _makeMovieList(BuildContext context, int index) {
    return Container(
      child: ListTile(
        contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: Container(
            child: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
              Image.network(
                _movies[index].movieImage,
                fit: BoxFit.cover,
                width: 100.0,
              )
            ])),
        title: Text(
          _movies[index].movieTitle,
        ),
        subtitle: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _makeStarRating(_movies[index].movieRating),
            Text(_movies[index].movieDescription),
            _makeCardDates(index)
          ],
        ),
      ),

    );
  }
//SECOND LIST
  Widget _makeCardDates(int index) {
    return Expanded(
      child: ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        padding: EdgeInsets.all(0.0),
        itemCount: _movies[index].dateTimeList.length,
        itemBuilder: (context, indexx) {
          return GestureDetector(
              onTap: () {
                print(_movies[index].dateTimeList[indexx].toString());
              },
              child: Card(
                  elevation: 8.0,
                  color: Color.fromRGBO(64, 75, 96, .9),
                  child: Column(
                    children: <Widget>[
                      Text(_movies[index].cinema),
                      Text(((dateFormatMovieHours
                          .format(_movies[index].dateTimeList[indexx]))
                          .toString())),
                    ],
                  )));
        },
        itemExtent: 40.0,
      ),
    );
  }

Answer 1

不需要在 itemExtent 上使用 ListView，尽管 ListView 需要为垂直滚动设置有限的高度（默认），并且需要为水平滚动设置有限的宽度。否则，ListView 会抛出“constraints are unbounded”错误。

对于您的用例，您可以在第一个 ListView 中的列表项上设置高度，或者在第二个 ListView 上设置高度。但是，如果您希望第二个 ListView 不可滚动，并且第一个 ListView 中的列表项将动态适应，您可以使用类似于此示例的小部件列。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final items = [
    'Apple',
    'Banana',
    'Carrot',
    'Dog',
    'Egg',
    'Flower',
    'Goat',
    'Honey'
  ];

  final subItems = ['1.00', '2.00', '3.00', '4.00'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: firstList(),
      ),
    );
  }

  firstList() {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Container(
          padding: EdgeInsets.all(8.0),
          child: Card(
            child: Container(
              color: Colors.lightBlue[50],
              padding: EdgeInsets.all(16.0),
              child: Row(
                children: [
                  Expanded(
                    flex: 2,
                    child: Text('${items[index]}'),
                  ),
                  Expanded(
                    flex: 1,
                    child: secondList(subItems),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  secondList(List item) {
    // Create List<Widget> for the second "List"
    var subList = List<Widget>();
    item.forEach((data) {
      subList.add(
        Card(
          child: Container(
            padding: EdgeInsets.all(16.0),
            color: Colors.lightBlueAccent,
            child: Text('$data'),
          ),
        ),
      );
    });
    // Populate Column instead of ListView
    return Column(
      children: subList,
    );
  }
}

颤振Listview项目范围

1 个答案: