如何创建水平 ListView.builder
Posted
技术标签:
【中文标题】如何创建水平 ListView.builder【英文标题】：How to create horizontal ListView.builder 【发布时间】：2021-04-09 22:08:27 【问题描述】：嘿，我想制作水平 ListView.builder 但它显示错误“BoxConstraints 强制和无限宽度”。实际上我想制作一个像 Fiverr 这样的“买家请求”页面。 我使用 PageView.builder 实现了我的目标，但是当我使用时
if(snapshot.connectionState == ConnectionState.waiting)
return SpinKitDoubleBounce(color: kPrimaryColor);
每当我滑动到下一个索引时，它都会让我回到第一个索引。
所以我想改用 ListView.builder。这是我的代码：（希望有人能解决我的问题）
if (snapshot.hasData)
return SizedBox(
child: ListView.builder(
// scrollDirection: Axis.horizontal,
itemCount: indexLength,
controller: PageController(viewportFraction: 1.0),
// onPageChanged: (int index) => setState(() => _index = index),
itemBuilder: (_, i)
return SingleChildScrollView(
child: Card(
margin: EdgeInsets.all(10),
child: Wrap(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundColor: kPrimaryColor.withOpacity(0.8),
backgroundImage: AssetImage('assets/images/nullUser.png'),
child: snapshot.data[i]['PhotoURL'] != null
? ClipRRect(
borderRadius: BorderRadius.circular(50),
child:
Image.network(snapshot.data[i]['PhotoURL'],
width: 50,
height: 50,
fit: BoxFit.cover,),
)
: ClipRRect(
borderRadius: BorderRadius.circular(50),
child:
Image.asset('assets/images/nullUser.png',
width: 50,
height: 50,
fit: BoxFit.cover,),
)
),
title: Text(
snapshot.data[i]['Email'],
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black.withOpacity(0.7),
),
),
subtitle: Text(
snapshot.data[i]['Time'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
color: Colors.grey[200],
),
padding: EdgeInsets.all(10),
child: Text(
snapshot.data[i]['Description'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
SizedBox(
height: 8,
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.category_outlined),
title: Text(
'Category : $snapshot.data[i]['Category']',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.location_pin),
title: Text(
snapshot.data[i]['Location'],
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(
Icons.attach_money,
color: kGreenColor,
),
title: Text(
'Budget : Rs.$snapshot.data[i]['Budget']',
style: TextStyle(
fontSize: 14,
color: kGreenColor,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.timer),
title: Text(
'Duration : $snapshot.data[i]['Duration']',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(
height: 35,
),
sendOfferButton(),
SizedBox(
height: 15,
),
Center(
child: Text(
"$i + 1/$indexLength",
style: TextStyle(fontSize: 13),
),
),
],
),
),
],
),
),
);
,
),
);
如果有人想查看完整文件。 Check it Here
【问题讨论】：
将宽度：MediaQuery.of(context).size.width 添加到您的大小框 根本不起作用 【参考方案1】：改用 pageview.builder ：
Container(
height: MediaQuery.of(context).size.height / 3,
width: MediaQuery.of(context).size.width,
child: PageView.builder(
pageSnapping: false,
physics: PageScrollPhysics(),
controller: _pageController,
scrollDirection: Axis.horizontal,
itemCount:
_articleController.articleListDat.length,
itemBuilder: (context, index)
return Container();
还有页面控制器
页面控制器 _pageController = PageController(initialPage: 2, viewportFraction: 0.9);
【讨论】：
谢谢先生，我已经使用了 PageView.builder 但问题是当我使用if(snapshot.connectionState == ConnectionState.waiting) return SpinKitDoubleBounce(color: kPrimaryColor); 显示 CircularProgressIndicator 直到数据加载并且当我滑动到第二个索引时它再次刷新并移动到第一个索引
你能添加精确的设计吗？对我来说它有效。将为您的设计提供完整代码
兄弟，我认为问题出在我的设计中，否则 listview 工作正常。你能提供我的设计代码吗【参考方案2】：
首先将您的 ListView.builder 包装到 LimitedBox / 容器中，然后在其上设置高度。然后添加
scrollDirection: Axis.horizontal,
完成了
【讨论】：
hmm，尝试删除 SingleChildScrollView 顺便说一句。 ListView.builder 具有内置滚动能力 如果它满足您的期望，请告诉我。 您的 ListView Builder 后代存在一些问题，我一直使用 listView.builder 作为水平列表，如果您操作正确，完全没有问题。尝试使用 DartDev 工具检查您的 Widget Trees，我确信您的 ListView Builder 后代有问题。尝试定位并修复它们的约束 啊！，我认为这是你的问题。列 crossAxisAlignment: CrossAxisAlignment.stretch 您正在尝试创建水平列表视图，而这个家伙正在尝试拉伸，那么您的布局一定不能布局。这意味着您的孩子试图拥有无限或更大的宽度，而他们的父母试图将其孩子包裹在可扩展的水平滚动视图宽度上以上是关于如何创建水平 ListView.builder的主要内容，如果未能解决你的问题，请参考以下文章
如何让 UICollectionView 连续水平滚动而不是创建第二行？