时间戳

首页 > 解决方案 > Column 中的 Listviewbuilder 实现不起作用

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

问题描述

我想在我的主屏幕上有一个可滚动的列表。我尝试将名为 Cardslist() 的 Listviewbuilder 实现到主屏幕中，但我总是抛出此异常：RenderFlex 子项具有非零弹性，传入的高度约束是无界的。这是主屏幕的代码：

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() 但我总是遇到这个异常。感谢您的时间和回答。

标签： flutterdart

解决方案

Column是一个高度可以无限增长的小部件。它不会对其子项施加任何高度限制。将sExpanded包含在其中是一种明智的方式，因为它们适合屏幕上所有可能的空间，但对它们的子元素施加了约束。ListViewColumnColumn

您可以删除Column您的包装CardList，或者，如果您以后确实需要Column其他东西，请尝试包装CardList另一个Expanded.

推荐阅读