我想实现FlutterMap部件顶部的水平可扩展ListView部件。
当我使用大多数小部件时,它们会显示在FlutterMap的Stack(顶部)中,但一旦我使用ListView,由于子项的高度未知,高度为100%,并且map不是交互式的。当我使用shrinkWrap
并且项目居中时,Map句柄在侧面,但它只在水平方向上收缩到内容。
我尝试使用文本部件或容器等,它的工作原理.只有ListView存在Map无法处理手势的问题。我尝试 Package ListView到SizedBox,使用shrinkWrap,没有运气。目标是有一个Map和底部的水平滚动图标/框,但现在我需要任何由ListView生成。下面是一个代码:
@override
Widget build(BuildContext context) {
return Stack(children: [
FlutterMap(
mapController: _mapController,
options: MapOptions(
center: currentLatLng,
zoom: _defaultZoomLevel,
),
children: [
TileLayer(
minZoom: 2,
maxZoom: 18,
backgroundColor: Colors.black,
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: const ['a', 'b', 'c'],
),
],
),
Positioned.fill(
child: Align(
alignment: Alignment.bottomCenter,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemExtent: 70.0,
children: [
const Chip(label: Text('data')),
const Chip(label: Text('data')),
const Chip(label: Text('data')),
])))
]);
}
我相信它必须与渲染器的东西,但我只是无法找到什么。任何帮助将不胜感激!
编辑:这里是固定的解决方案:
@override
Widget build(BuildContext context) {
return Stack(fit: StackFit.expand, children: [
FlutterMap(
mapController: _mapController,
options: MapOptions(
center: currentLatLng,
zoom: _defaultZoomLevel,
),
children: [
TileLayer(
minZoom: 2,
maxZoom: 18,
backgroundColor: Colors.black,
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: const ['a', 'b', 'c'],
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
height: 50.0,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemExtent: 70.0,
children: [
const Chip(label: Text('data')),
const Chip(label: Text('data')),
const Chip(label: Text('data')),
]),
))
]);
}
1条答案
按热度按时间jei2mxaa1#
用
Sizedbox
Package 你的Listview
,并尝试为你的ListView
设置一个高度。