我正在尝试使用列布局在卡片小部件内显示 ListView，但卡片小部件未出现在屏幕中，我收到错误消息。然而，当我更改为堆栈布局时，小部件出现在屏幕上但位于其他组件之上，这不是我想要的。

请参阅下面我的卡片小部件代码

import 'package:flutter/material.dart';
import 'package:finsec/widget/cardview_list_widget.dart';
import 'package:finsec/widget/header.dart';
import 'package:finsec/widget/vertical_padding.dart';

import 'package:finsec/data/cardview_list_item.dart';

final shape =  const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(8.0),
      topRight: Radius.circular(8.0),
      bottomLeft: Radius.circular(8.0),
      bottomRight: Radius.circular(8.0),
    )
);

Widget cardView(BuildContext context) {
  return Padding(
      padding: EdgeInsets.fromLTRB(0.0,15.0,0.0,0.0) ,
      child:  new Card(
          elevation: 4.0,
          shape: shape,
          child: new Container(
              width: MediaQuery.of(context).size.width ,
              height: 200,
              child: new Column(
                  children: <Widget>[
                    Header(text: 'Summary', textSize: 24.0, backgroundColor: Color(0xffC4C4C4), textColor: Colors.black, height: 50, padding: 20.0, headerRadius: 8.0,),
                   myListView(),
                  ],
              ),
          ),
      ),
  );
}

下面是我的 ListView 小部件的代码:

import 'package:flutter/material.dart';
import 'package:finsec/data/cardview_list_item.dart';


class myListView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: kCardviewListItems.length,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(kCardviewListItems[index].icon),
          title: Align(
            child: new Text(kCardviewListItems[index].title),
            alignment: Alignment(-1.4, 0),
          ),
          trailing: Text(kCardviewListItems[index].amount),
        );
      },
    );
  }
}

这是 ListView 的数据:

import 'package:finsec/model/cardview_list_item.dart';
import 'package:flutter/material.dart';

const kCardviewListItems = <CardviewListItem>[
  CardviewListItem(
      title: 'Total Income',
      amount:'4434.65',
      icon: Icons.credit_card
  ),
  CardviewListItem(
      title: 'Total Expenses',
      amount:'753.64',
      icon: Icons.credit_card
  ),
  CardviewListItem(
      title: 'Total Credit Card',
      amount:'75.23',
      icon: Icons.credit_card
  ),
];

IDE 上的错误如下:

I/flutter (25995): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (25995): The following assertion was thrown during performResize():
I/flutter (25995): Vertical viewport was given unbounded height.
I/flutter (25995): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (25995): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (25995): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (25995): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (25995): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (25995): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (25995): the height of the viewport to the sum of the heights of its children.
I/flutter (25995): 
I/flutter (25995): When the exception was thrown, this was the stack:
I/flutter (25995): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1135:15)
I/flutter (25995): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1188:6)
I/flutter (25995): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1629:9)
I/flutter (25995): #3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (25995): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter (25995): #5      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (25995): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)

I/flutter (25995): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderViewport#d1ae0 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderViewport#d1ae0 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#37bbc relayoutBoundary=up9 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#0aeed relayoutBoundary=up8 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#eec60 relayoutBoundary=up7 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#c725d relayoutBoundary=up6 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#49c66 relayoutBoundary=up5 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#ccd3a relayoutBoundary=up4 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#b19b2 relayoutBoundary=up3 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#0de2e relayoutBoundary=up2 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#8ee47 relayoutBoundary=up1 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderFlex#01dd8 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderConstrainedBox#16e60 relayoutBoundary=up12 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#dbcdc relayoutBoundary=up11 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: _RenderInkFeatures#2862e relayoutBoundary=up10 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#8c3e4 relayoutBoundary=up9 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderPhysicalShape#e7aa2 relayoutBoundary=up8 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderPadding#4dcf9 relayoutBoundary=up7 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#38f0f relayoutBoundary=up6 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: RenderBox was not laid out: RenderPadding#1a5eb relayoutBoundary=up5 NEEDS-PAINT
I/flutter (25995): Another exception was thrown: 'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 314 pos 12: 'child.hasSize': is not true.
I/flutter (25995): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.

我希望 ListView 显示在标题小部件下方。

最佳答案

可能给 listView 添加一个 shrinkWrap 属性会解决问题。

What does the shrink wrap property do in flutter?

关于flutter - 卡片小部件内的 ListView 未使用列布局显示在屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56690605/