使用一个行处于flutter状态的ListViewBuilder

Question

我从一个正常工作的数据库接收数据，但我遇到了一个问题，即数据没有显示在我创建的CustomWidget卡中。我尝试过使用包络处理、扩展和灵活，但都不起作用。我想这可能是我的位置，但我不太确定。我得到这些错误：

*"package:flatt/src/rendering/viewer.dart"：断言失败：行1869位置16："constraints.hasBoundedWidth"：不为true。

RenderBox未布局：RenderShrinkWrappingViewport#39186 relayoutBoundary=up36 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

"package:flatt/src/rendering/box.dart"：

断言失败：行1982位置12:"hasSize"*

Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: 200,
child: FutureBuilder(
future: _getListing(),
builder: (context,AsyncSnapshot snapshot) {
if(snapshot.hasData) {
print(snapshot.data.length);
return ListView.builder(
shrinkWrap: true,
itemCount:snapshot.data.length,
itemBuilder: (context,index) {
return Row(children:  <Widget>[
Flexible(
child: ItemsCard(
image: defaulturl+"${snapshot.data[index].image}", // var defaulturl = "https://sam-thige.000webhostapp.com/productimages/";
title: "${snapshot.data[index].description}",
location: "${snapshot.data[index].location}",
),
),
]);
}
);
}
else{
return Center(child: CircularProgressIndicator(),);
}
}
),
),
);
}

这是ItemsCard小部件

class ItemsCard extends StatelessWidget {
const ItemsCard({
Key? key,
required this.location,
required this.image,
required this.title,
}) : super(key: key);
final String image, title, location;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.only(left: 20.0, top: 10.0, bottom: 50.0),
width: size.width * 0.4,
child: Column(
children: <Widget>[
Image.network(image),
GestureDetector(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Color.fromARGB(251, 105, 111, 216),
blurRadius: 20.0,
offset: Offset(0, 10))
]),
child: Row(
children: <Widget>[
RichText(
text: TextSpan(children: [
TextSpan(
text: "$title n",
style: Theme.of(context).textTheme.button),
TextSpan(
text: "$location",
style: TextStyle(color: Colors.blue.withOpacity(0.5)))
]))
],
),
),
)
],
));
}
}

Answer 1

由于您没有向我们提供名为ItemsCard的自定义小部件的完整代码，因此很难判断Row->灵活的小部件父级是必要的。跳过它，您的ListView.builder它不是水平的，而是垂直的，因此没有任何空间进行水平渲染。解决方案是向SizedBox添加宽度，如下所示：

Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: 200,
width: MediaQuery.of(context).size.width //adding the whole screen's width,
child: FutureBuilder(
future: _getListing(),
builder: (context,AsyncSnapshot snapshot) {
if(snapshot.hasData) {
print(snapshot.data.length);
return ListView.builder(
shrinkWrap: true,
itemCount:snapshot.data.length,
itemBuilder: (context,index) {
return Row(children:  <Widget>[
Flexible(
child: ItemsCard(
image: defaulturl+"${snapshot.data[index].image}", // var defaulturl = "https://sam-thige.000webhostapp.com/productimages/";
title: "${snapshot.data[index].description}",
location: "${snapshot.data[index].location}",
),
),
]);
}
);
}
else{
return Center(child: CircularProgressIndicator(),);
}
}
),
),
);
}

Answer 2

您需要为listView.Builder提供固定的高度和宽度。您可以将其用作FutureBulder的父级或listView.builder的父级。您可以根据需要更改高度或宽度。这只是解决方案。

Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: FutureBuilder(
future: _getListing(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return SizedBox(
height: size.height,
width: size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return Row(children: const <Widget>[
Flexible(
child: ItemsCard(
image: defaulturl +
"${snapshot.data[index].image}", // var
// defaulturl = "https://sam-thige.000webhostapp.com/productimages/";
title: "${snapshot.data[index].description}",
location: "${snapshot.data[index].location}",
),
),
]);
}));
} else {
return Center(
child: CircularProgressIndicator(),
);
}
}
),
);
}