flutter - 堆栈内的水平列表视图:水平视口被赋予无限宽度
问题描述
如何在 Flutter 的 Stack 中显示水平 Listview?
Listview 是另一个(垂直)Listview 中卡片的一部分。如果我给它一个固定的宽度,我可以正确显示它,但我不应该,我希望它适应卡片宽度。
我有以下代码:
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
final PlatformModel platform = snapshot.data[index];
final EdgeInsets padding = index == 0
? const EdgeInsets.only(
left: 16.0,
right: 8.0,
top: 8.0,
bottom: 8.0,
)
: const EdgeInsets.only(
left: 8.0,
right: 8.0,
top: 8.0,
bottom: 8.0,
);
bloc.fetchPlatformLogo(platform.platformLogo);
String fetcher = "platforms='${platform.id}'";
bloc.fetchGames(fetcher);
return Padding(
padding: padding,
child: Card(
child: Container(
height: 250.0,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.network(NETWORK_URL),
_listGames(fetcher),
],
),
),
),
);
},
);
和
Widget _listGames(String fetcher) {
final bloc = BlocProvider.of<GamesBloc>(context);
return Positioned(
bottom: 5.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 200,
child: StreamBuilder(
stream: bloc.games,
builder: (context,
AsyncSnapshot<Map<String, Future<List<GameModel>>>> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return FutureBuilder(
future: snapshot.data[fetcher],
builder:
(context, AsyncSnapshot<List<GameModel>> snapshotGames) {
if (!snapshot.hasData || !snapshotGames.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
if (snapshotGames.data.length == 0) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.warning,
size: 100.0,
),
Text("Nessun gioco presente"),
],
),
);
}
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshotGames.data.length,
itemBuilder: (context, index) {
final GameModel game = snapshotGames.data[index];
final lastGame = index == snapshotGames.data.length;
bloc.fetchGameCover(game.cover);
return Padding(
padding:
lastGame ? 0.0 : const EdgeInsets.only(right: 8.0),
child: GameCard(game: game),
);
},
);
},
);
},
),
),
),
);
}
但我不断收到“水平视口被赋予无限宽度”。
例如,如果我说
child: SizedBox(
height: 200,
width: 300,
child: StreamBuilder(
它显示得很好,但它当然不好。
我能做些什么?
解决方案
可以试试这个吗。。
ListView.builder(
shrinkWrap: true,
...
推荐阅读
- reactjs - 数据未定义:使用 Next.js 在 React 中为 GraphQL @apollo/client 使用Query Hook
- flutter - 可扩展和可滚动的浮动操作按钮颤动
- java - 在 junit 测试中,intelliJ 中抛出了多个异常
- wordpress - WooCommerce 产品页面上未显示自定义产品选项卡
- amazon-web-services - AWS CloudFormation:为现有 S3 存储桶配置复制
- powershell - 即使将搜索的名称列为已安装的模块,当它无法按名称找到它时如何卸载powershell模块?
- xaml - 如何在 XAML AbsoluteLayout (Xamarin.Forms) 中为元素使用不同的对齐方式
- reactjs - 如何更新 react-native 中的状态以检测 Hooks 何时发生某个事件(给定日期已过)?
- python - mkvirtualenv 返回 zsh:找不到命令:mkvirtualenv
- javascript - React.js,对象中的属性未定义但存在于具有非空值的对象中