flutter - Column内的Listviewbuilder实现不起作用

Question

我想在主屏幕上显示一个可滚动的列表。我试图在主屏幕中实现称为Cardslist()的Listviewbuilder，但始终会引发此异常: RenderFlex子级具有非零的flex，传入的高度约束是无界的。 以下是主屏幕的代码:

import 'package:biminda_app/Components/cards_list.dart';
import 'package:biminda_app/Components/real_new_finished_card.dart';
import 'package:flutter/material.dart';
import 'package:biminda_app/Components/custom_Buttons.dart';
import 'package:biminda_app/Components/constants.dart';
import 'package:flutter/rendering.dart';
import 'package:biminda_app/Screens/new_card_screen1.dart';
import 'package:biminda_app/Screens/settings.dart';
import 'package:biminda_app/Components/card_data.dart';
import 'package:biminda_app/Components/cards_list.dart';

class HomeScreen extends StatefulWidget {
  static const String id = 'home_screen';
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String individualsName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            padding: EdgeInsets.fromLTRB(
              20,
              40,
              20,
              0,
            ),
            child: TextField(
              style: TextStyle(
                color: Colors.black,
              ),
              decoration: kTextFieldInputDecoration,
              onChanged: (value) {
                individualsName = value;
                // TODO: Der Input muss das Individum in der Liste
                // TODO: erkennen und anzeigen
              },
            ),
          ),
          //TODO HIER
          Expanded(
              child: Column(
            children: <Widget>[
              CardsList(),
            ],
          )),

          Center(
            child: Container(
              child: MainButton(
                  functionality: 'New',
                  onPressed: () {
                    Navigator.pushNamed(context, NewCard.id);
                  }),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                SideButton(
                    functionality: 'Settings',
                    onPressed: () {
                      Navigator.pushNamed(context, Settings.id);
                    }),
                SideButton(
                    functionality: 'Calendar',
                    onPressed: () {
                      Navigator.pushNamed(context, Settings.id);
                    }),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这是Cardslist()的代码:

class CardsList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CardData>(builder: (context, cardData, child) {
      return ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            final card = cardData.cards[index];
            return FinalCardCreation(
              finalname: card.cname,
              finalbirthday: card.cbirthday,
            );
          });
    });
  }
}

创建的卡FinalCardCreation()的代码:

class CardFinish extends StatefulWidget {
  @override
  CardFinishState createState() => CardFinishState();
}

class CardFinishState extends State<CardFinish> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height:
          MediaQuery.of(context).size.height * 0.5, //<-- set height of the card
      child: FinalCardCreation(),
    );
  }
}

class FinalCardCreation extends StatelessWidget {
  String finalname;
  String finalbirthday;

  FinalCardCreation({
    Key key,
    @required this.finalname,
    @required this.finalbirthday,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Color(0xFFef9a9a),
      margin: EdgeInsets.all(2),
      elevation: 8,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(22)),
      child: Column(
        children: <Widget>[
          SizedBox(height: 8),
          Expanded(
            child: FinalCardContent(
              name: finalname,
              birthday: finalbirthday,
            ),
          )
        ],
      ),
    );
  }
}

class FinalCardContent extends StatelessWidget {
  String name;
  String birthday;
  FinalCardContent({Key key, @required this.name, @required this.birthday})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              '$name',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 50.0,
                color: Colors.black,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              '$birthday',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 50.0,
                color: Colors.black,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我试图以多种方式包装Cardslist()，但总是遇到此异常。谢谢您的时间和回答。

Answer 1

Column是可以无限增加高度的小部件。它没有对其子代施加任何高度限制。 Expanded是在ListView中包括Column的明智方法，因为它们适合屏幕上Column的所有可能空间，但对其子项施加了约束。

您可以删除包裹您的Column的CardList，或者，如果以后确实需要该Column用于其他内容，请尝试将CardList包裹在另一个Expanded中。