我想创建一个水平的 ListView 或 GridView，图像的高度是固定的，但图像的宽度应该是动态的。
下面是我正在尝试执行但无法获得预期输出的代码。我还添加了说明预期输出的设计截图
With List View
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class ViewPager extends StatefulWidget {
createState() => _ViewPager();
}
class _ViewPager extends State<ViewPager> {
static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
_imagesList(images: [exercise_image1, exercise_image2]),
],
),
);
}
Widget _imagesList({List<String> images}) {
return Container(
width: double.maxFinite,
height: 150,
color: Colors.red,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
_imageListItem(imagePath: images.first),
_imageListItem(imagePath: images.last),
],
),
);
}
Widget _imageListItem({@required String imagePath}) {
return CachedNetworkImage(
width: 200, // I want this to be according to the image width
imageUrl: imagePath,
placeholder: (context, url) => Container(
child: CircularProgressIndicator(),
),
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fitHeight
),
),
),
);
}
}
With Grid View
与 GridView 相同的问题，我们设置了 GridView 的高度但无法为图像提供动态宽度
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class ViewPager extends StatefulWidget {
createState() => _ViewPager();
}
class _ViewPager extends State<ViewPager> {
static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
height: 200,
child: _imagesList(images: [exercise_image1, exercise_image2]),
),
),
);
}
Widget _imagesList({List<String> images}) {
return GridView.count(
crossAxisCount: 1,
scrollDirection: Axis.horizontal,
children: [
_imageListItem(imagePath: images[0]),
_imageListItem(imagePath: images[1]),
],
);
}
Widget _imageListItem({@required String imagePath}) {
return CachedNetworkImage(
imageUrl: imagePath,
placeholder: (context, url) => Container(
child: CircularProgressIndicator(),
),
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fitHeight
),
),
),
);
}
}
最佳答案
实现这一目标的一种方法是这样的。
class _MyWidgetState extends State<MyWidget> {
static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
height: 200,
child: _imagesList(images: [exercise_image1, exercise_image2]),
),
),
);
}
Widget _imagesList({List<String> images}) {
return ListView(
scrollDirection: Axis.horizontal,
children: [
_imageListItem(imagePath: images[0]),
_imageListItem(imagePath: images[1]),
],
);
}
Widget _imageListItem({@required String imagePath}) {
return CachedNetworkImage(
imageUrl: imagePath,
placeholder: (context, url) => Container(
child: CircularProgressIndicator(),
),
);
}
}
关于flutter - 水平 ListView / GridView 中不同大小的图像，具有固定高度和动态宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66529316/