flutter: showbottommodal中cachednetworkimage的大小太小 &

Question

我想让CachedNetworkImage的尺寸比图片中的大。我试着设置和重置所有小部件的高度，但我无法使它变大。谁来帮帮我。

这是包含图像的ModalBottomSheet代码:

void showModal(
BuildContext ctx,
String proId,
String name,
String productDescription,
num price,
List<dynamic> img,
num stockCount,
String outId,
String merId
) {
final cartData = Provider.of<CartData>(ctx, listen: false);
showModalBottomSheet<void>(
isScrollControlled: true,
backgroundColor: Colors.white70.withOpacity(0.8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
context: ctx,
builder: (BuildContext context) {
return
// Container(
// //height: 650,
// child:
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Column(
children: [
Text(
name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
softWrap: true,
overflow: TextOverflow.fade,
),
SizedBox(height: 10),
Container(
alignment: Alignment.center,
//height: 500,
// height: MediaQuery
//     .of(context)
//     .size
//     .height,
child: CarouselSlider(
items: img.map<Widget>((item) =>
Container(
padding: const EdgeInsets.all(3),
child: InkWell(
onTap: () {
Navigator.of(
context).push(MaterialPageRoute(builder: (_) =>
FullScreenImage(
image: item
//Image.network(item, fit: BoxFit.contain)
)));
},
child: CachedNetworkImage(
imageUrl: "$item",
//height: 500,//MediaQuery.of(context).size.height,
// width: MediaQuery.of(context).size.width*.7,
fit: BoxFit.cover,
)),
)
)
.toList(),
options:  CarouselOptions(
enableInfiniteScroll: false,
initialPage: 0,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 4),
autoPlayAnimationDuration:
const Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
viewportFraction: 1
),
)
),
Container(
//height: 200,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Text(
productDescription,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
),
softWrap: true,
overflow: TextOverflow.fade,
),)),
SizedBox(height: 10),
],
),
//flex: 8,
),
Column(
children: [
Align(
alignment: Alignment.bottomRight,
child:  Text(
"₮ ${NumberFormat.decimalPattern().format(price)}",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 17,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
CartCounter(stockCount),
Expanded(
flex: 2,
child: ElevatedButton.icon(
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(13),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
color3,
),
),
onPressed: () {
Navigator.of(context).pop();
cartData.addToCart(
ctx: ctx,
productId: proId,
price: price,
productName: name,
countInStock: stockCount,
qty: CartCounter.qty,
img: img,
outletID: outId,
merchId: merId
);
},
icon: const Icon(Icons.add_shopping_cart_rounded),
label: Text(Languages.of(context)!.addToBasket),
),
),
],
),
],
)
],
),
// ),
);
},
);

我很困惑。我尝试了不同的配置，在某些时候，我裁剪了周围都是空白的图像……非常感谢帮助!提前感谢!

Answer 1

在carousel的选项中有aspectRatio属性，它控制项目的大小，只需将其更改为接近示例中您喜欢的值，默认值为16/9。这样，carousel项目的面积将会更大，您可以为图像定义自定义值，只要它尊重carousel容器的大小。

options: CarouselOptions(
aspectRatio: 1,
enableInfiniteScroll: false,
initialPage: 0,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 4),
autoPlayAnimationDuration:
const Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
viewportFraction: 1),