将卡片添加到 ListView

2024-02-29

我正在尝试获取列表Cards https://docs.flutter.io/flutter/material/Card-class.html,并尝试使用Expanded小部件,但得到了overflow error

My code:

new Expanded(
      child: StreamBuilder(
          stream: Firestore.instance.collection('baby').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const Text('Loading...');
            return ListView.builder(
                itemCount: snapshot.data.documents.length,
                padding: const EdgeInsets.only(top: 10.0),
                itemExtent: 25.0,
                itemBuilder: (context, index) {
                  DocumentSnapshot ds = snapshot.data.documents[index];
                  return //Text(" ${ds['name']} ${ds['vote']}");
                    Card(
                      child: Expanded(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            const ListTile(
                              leading: const Icon(Icons.album),
                              title: const Text('The Enchanted Nightingale'),
                              subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
                            ),
                            new ButtonTheme.bar( // make buttons use the appropriate styles for cards
                              child: ButtonBar(
                                children: <Widget>[
                                   FlatButton(
                                    child: const Text('BUY TICKETS'),
                                    onPressed: () { /* ... */ },
                                  ),
                                   FlatButton(
                                    child: const Text('LISTEN'),
                                    onPressed: () { /* ... */ },
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                    ),
                    );
                });
          })),

我得到的错误是:Incorrect use of ParentDataWidget.

完整错误:

正在执行热重载... I/flutter(9119):══╡小部件库捕获异常╞══════════════════════════ ════════ ═════════════════════════ I/flutter ( 9119): 构建 DefaultTextStyle(debugLabel: (englishLike I/flutter ( 9119): body1).merge(blackMountainView body1),继承:false,颜色:Color(0xdd000000),系列:Roboto, I/flutter ( 9119):大小:14.0,权重:400,基线:字母,装饰:TextDecoration.none,softWrap:包装 I/flutter(9119):在框宽度,溢出:剪辑): I/flutter (9119):ParentDataWidget 使用不正确。 I/flutter (9119):扩展的小部件必须直接放置在 Flex 小部件内。 I/flutter(9119):Expanded(无深度,flex:1,dirty)有一个Flex祖先,但它们之间还有其他小部件: I/flutter ( 9119): - _InkFeatures-[GlobalKey#93e52 墨迹渲染器] 我/颤振(9119):-CustomPaint I/flutter(9119):-PhysicalShape(剪辑器:ShapeBorderClipper,海拔:1.0,颜色:颜色(0xffffffff),阴影颜色: I/颤动(9119):颜色(0xff000000)) I/flutter(9119):-填充(填充:EdgeInsets.all(4.0)) I/flutter(9119):-语义(容器:true,属性:SemanticsProperties,标签:null,值:null,提示:null) I/flutter ( 9119): - RepaintBoundary-[] 我/颤振(9119):-KeepAlive(keepAlive:false) I/flutter ( 9119): - SliverFixedExtentList(委托: SliverChildBuilderDelegate#b334e(估计子数: 3)) I/flutter ( 9119): - SliverPadding(填充: EdgeInsets(0.0, 10.0, 0.0, 0.0)) I/flutter(9119):-视口(axisDirection:向下,锚点:0.0,偏移量:ScrollPositionWithSingleContext#bebad(偏移量: I/flutter ( 9119): 0.0,范围:0.0..0.0,视口:380.0,ScrollableState,AlwaysScrollableScrollPhysics -> I/flutter ( 9119): ClampingScrollPhysics, IdleScrollActivity#7b3a8, ScrollDirection.idle)) I/flutter ( 9119): - IgnorePointer-[GlobalKey#4c7f9](忽略: false, ignoringSemantics: false) I/flutter(9119):-语义(容器:false,属性:SemanticsProperties,标签:null,值:null,提示:null) I/flutter ( 9119): - 侦听器(侦听器:[向下],行为:不透明) 我/颤振(9119):-_GestureSemantics 我/颤振(9119):-_ExcludableScrollSemantics-[GlobalKey#22165] I/flutter(9119):-RepaintBoundary 我/颤振(9119):-CustomPaint I/flutter(9119):-RepaintBoundary I/flutter ( 9119): - Expanded(flex: 1) (这是一个与有问题的扩展不同的扩展) I/flutter (9119):这些小部件不能位于 Expanded 及其 Flex 之间。 I/flutter ( 9119):有问题的 Expanded 的父级的所有权链是: I/flutter ( 9119): DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#93e52 墨迹渲染器] ← I/flutter(9119):NotificationListener←CustomPaint←_ShapeBorderPaint←PhysicalShape I/flutter ( 9119): ← _MaterialInterior ← 材质 ← 填充 ← ⋯ 我/颤振(9119): ════════════════════════════════════════ ══════════ ════════════════════════════════════════ ══════════ I/flutter (9119):抛出了另一个异常:ParentDataWidget 使用不正确。 I/chatty ( 9119): uid=10096(com.example.flutterapp) Thread-3 相同的 3 行 I/flutter (9119):抛出了另一个异常:ParentDataWidget 使用不正确。

UPDATE
这是我得到的输出屏幕:

如果我删除了Expanded输出变成这样:


我明白了,整个问题在于使用itemExtent: 25.0, at ListView.builder通过删除它,一切都默认可扩展并运行顺利。

在寻找解决方案时,我遇到了this https://flutterbyexample.com/list-view-and-builder-methods/ and this https://stackoverflow.com/a/45670718/2441637 and this https://flutter.io/cookbook/lists/long-lists/,这帮助我用更干净的代码重建应用程序,下面是感兴趣的人:

main.dart:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'BabyModel.dart';
import 'BabyCard.dart';

void main() => runApp(MyApp(
  textInput: Text("Text Widget"),
));

class MyApp extends StatefulWidget {
  final Widget textInput;
  MyApp({this.textInput});

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool checkBoxValue = false;

  @override
  Widget build(BuildContext ctxt) {
    return StreamBuilder(
      stream: Firestore.instance.collection('baby').snapshots(),
      builder: (_, AsyncSnapshot<QuerySnapshot> snapshot) {
        var documents = snapshot.data?.documents ?? [];
        var baby =
        documents.map((snapshot) => BabyData.from(snapshot)).toList();
        return BabyPage(baby);
      },
    );
  }
}

class BabyPage extends StatefulWidget {
  final List<BabyData> allBaby;

  BabyPage(this.allBaby);

  @override
  State<StatefulWidget> createState() {
    return BabyPageState();
  }
}


class BabyPageState extends State<BabyPage> {
  @override
  Widget build(BuildContext context) {

  //  var filteredBaby = widget.allFish.where((BabyData data) {
  //    data.name = 'Dana';
  //  }).toList();

    return MaterialApp(
        home: SafeArea(
        child: Scaffold(
        body: Container(
        child: ListView.builder(
            itemCount: widget.allBaby.length,
            padding: const EdgeInsets.only(top: 10.0),
            itemBuilder: (context, index) {
              return BabyCard(widget.allBaby[index]);
            })
      ),
    )));
  }
}

BabyModel.dart:

import 'package:cloud_firestore/cloud_firestore.dart';

class BabyData {
  final DocumentReference reference;
  String name;
  int vote;

  BabyData.data(this.reference,
      [this.name,
        this.vote]) {
    // Set these rather than using the default value because Firebase returns
    // null if the value is not specified.
    this.name ??= 'Frank';
    this.vote ??= 7;
  }

  factory BabyData.from(DocumentSnapshot document) => BabyData.data(
      document.reference,
      document.data['name'],
      document.data['vote']);

  void save() {
    reference.setData(toMap());
  }

  Map<String, dynamic> toMap() {
    return {
      'name': name,
      'vote': vote,
    };
  }
}

BabyCard.dart:

import 'package:flutter/material.dart';
import 'BabyModel.dart';

class BabyCard extends StatefulWidget {
  final BabyData baby;

  BabyCard(this.baby);

  @override
  State<StatefulWidget> createState() {
    return BabyCardState(baby);
  }
}

class BabyCardState extends State<BabyCard> {
  BabyData baby;
  String renderUrl;

  BabyCardState(this.baby);

  Widget get babyCard {
    return
      new Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: const Icon(Icons.album),
              title: Text('The ${baby.name} is having:'),
              subtitle: Text('${baby.vote} Votes.'),
            ),
            new ButtonTheme.bar( // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    child: const Text('Thumb up'),
                    onPressed: () { /* ... */ },
                  ),
                  new FlatButton(
                    child: const Text('Thumb down'),
                    onPressed: () { /* ... */ },
                  )]))]));
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
          child:  babyCard,
        );
  }
}

输出是:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将卡片添加到 ListView 的相关文章

随机推荐

  • 如何在 SwiftUI 中初始化 View Again?

    我在我的项目中使用 SwfitUI 并且有一个 NavigationView 和 List 我在打开详细视图后单击单元格 然后单击导航后退按钮 我想在单击导航后退按钮后删除视图 它是 SwiftUI 中的结构 因为如果我再次单击相同的单元格
  • 如何初始化共享 javascript 模块默认导出

    我想在多个模块之间共享一个 api 实例 并能够使用外部配置对其进行初始化 我的代码使用 Webpack 和 Babel 将这些漂亮的 ES6 模块转换为浏览器可用的东西 我正在努力实现这一目标 api js let api null ex
  • 解码熊猫字符

    下面是我的 DF 示例 ROLE NAME GESELLSCHAFTER DUPONT DUPONT GESCH FTSF HRER DUPONT DUPONT KOMPLEMENT R DUPONT DUPONT GESELLSCHAFT
  • 无法分配对象,因为其复制赋值运算符被隐式删除错误

    在我的小型打砖块克隆游戏中 我试图从向量中删除一些值 该向量包含 Brick 类 它们以网格状模式在屏幕上实例化 当球和砖块发生碰撞时 砖块需要消失 我正在尝试用一小段代码来完成此任务 for int i 0 i lt bricks siz
  • CAReplicatorLayer 背后的魔力是什么?

    我觉得 CAReplicatorLayer 有趣的地方是 它能够非常有效地使用不同的变换多次显示 CALayer 如何 看起来它以某种方式重用了复制层的 后备存储 甚至对其应用了一些色调 如何 我想获得源代码或了解 CAReplicator
  • CMD:将 ECHO 管道传输到 SET/在变量中扩展变量

    x 12 3 返回从 x 变量中第 12 个字符开始的 3 个字符 我一直试图完成的是使用变量而不是12 and 3 比方说y 12 and z 3 那么 你就不能使用 x y z 因为 CMD 会认为 x 是一个变量 你能做的是set v
  • IE8 中 IIS7.5 中的 ASP.NET MVC2 的会话不粘连

    我们有一个 ASP NET MVC2 Web 应用程序 由于超出本问题范围的原因 我们决定在应用程序中使用经典会话状态 其中实现了与会话相关的以下功能 global asax 中的 Session Start 事件处理程序在会话中存储变量
  • Python 获取当前 URL

    我如何使用Python获取当前URL 我需要获取当前的 URL 以便我可以检查它的查询字符串 例如 requested url URL HERE url urlparse requested url if url 4 params dict
  • 项目导入需要 Sbt 0.12.4+

    我目前正在阅读Play for Scala Covers Play 2Peter Hilton 的书 出版商 Manning 并尝试坚持他们在书中概述的版本 播放版本 2 1 1 我下载了新的 IntelliJ IDEA 14 CE 应用程
  • Facebook Android SDK 的密钥哈希无效

    我正在尝试使用 Facebook Android SDK 开发一个带有 Facebook 登录按钮的简单应用程序 但我在密钥哈希方面遇到了麻烦 我创建了调试密钥和发布密钥 调试键 keytool exportcert alias andro
  • 如何在 Firefox 中调试 Service Worker?

    在 FF 中调试 Service Worker 似乎非常痛苦 我知道从主页我可以 进入应用程序面板 点击 关于调试 在新页面中搜索我的员工以及其他 200 名员工 单击开始 然后单击检查 我必须寻找两个控制台而不是一个并通过 两者之间的消息
  • git rebase -i HEAD~7 -- 在编辑器中仅显示“noop”

    我正在尝试将位于 HEAD 的提交压缩为后面的提交 当我跑步时git rebase i HEAD 7 但是 我只看到一个noop在编辑器中 我完全不知道这是如何运作的 我在分行工作 cleanup 我创建的 使用checkout b cle
  • 如何检查 VBScript 的默认主机是 WScript 还是 CScript?

    我想知道特定机器上 VBScript 的默认主机是什么 是否设置为 WScript 还是 CScript 例如 如果我使用cscript h cscript s那么有什么方法可以检查主机 VBScript 是否设置为 cscript 我找到
  • 使用逗号运算符是个好习惯吗?

    我最近 实际上仅在 SO 上 遇到了 C C 逗号运算符的使用 据我所知 它在左侧和右侧运算符之间的线上创建了一个序列点 以便您拥有可预测的 定义的 评估顺序 我对为什么要在语言中提供这一点感到有点困惑 因为它似乎是一个可以应用于本来不应该
  • 如何从 vue 3 中的 slot 获取 ref?

    我需要用名字来聚焦参考test1设置一些放置在组件槽中的值 从外部 有可能以某种方式做到这一点吗 我尝试从 refs 或 slots 获取 但失败了 App vue
  • 实时键盘输入到控制台(在 Windows 中)?

    我有一个双向链接列表类 我想在用户键入字符时将字符添加到列表中 或者每次用户按退格键时删除列表中的最后一个节点 同时在控制台中实时显示结果 我将使用哪些函数来拦截单个键盘输入并将其实时显示到控制台 所以结果如下 用户开始输入 Typ 用户停
  • 将列表 1 中的特定数字与列表 2 中的特定数字交换

    最近在温习一些Prolog 我有点喜欢随机提出问题来尝试解决 然后解决它们 但这是相当困难的 我不是一个会放弃我已经着手解决的问题的人 问题 我想创建一个谓词 它有 2 个预先确定的列表 2 个要交换的数字 然后在交换完成后输出列表 进一步
  • 操作 ggpairs 中的轴标题 (GGally)

    我使用下面的代码来生成以下图表 Setup data airquality Device start png filename example png units cm width 20 height 14 res 300 Define c
  • 从字符串中提取最大的数字序列(正则表达式,或?)

    我有类似于以下内容的字符串 4123499 TESCO45 123 every99999994 54 我想分别提取每个字符串中最大的数字序列 4123499 99999994 我以前尝试过正则表达式 我使用的是VB6 Set rx New
  • 将卡片添加到 ListView

    我正在尝试获取列表Cards https docs flutter io flutter material Card class html 并尝试使用Expanded小部件 但得到了overflow error My code new Ex