这是我的代码的结果。
我在PageView
小部件中使用了四个图像,并且
由于某些图片的尺寸与另一张图片不同,因此我想通过boxfit调整图片的尺寸。但是要进行盒装,图片的高度太长了。
所以我限制了Container
的height属性,但是无论我如何在makePage小部件中设置容器的高度(例如100,height / 8 ...)
容器的高度是固定的(绿色容器)
这是因为viewportFraction吗?有谁知道是什么原因造成的?
_makePage小部件返回PageView的每个页面(图像)
import 'package:flutter/material.dart';
import 'package:dots_indicator/dots_indicator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(body: DotIndicator()),
);
}
}
class DotIndicator extends StatefulWidget {
@override
_DotIndicatorState createState() => _DotIndicatorState();
}
class _DotIndicatorState extends State<DotIndicator> {
final List<String> imgEx = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
];
//pageView controller
final _controller = PageController(viewportFraction: 0.8);
double currentPage = 0.0;
@override
Widget build(BuildContext context) {
return _showMenuPage(context);
}
Widget _showMenuPage(BuildContext context) {
final _itemCount = imgEx.length;
return Container(
height: MediaQuery.of(context).size.height / 2,
color: Colors.grey[300],
child: Stack(
children: [
PageView.builder(
controller: _controller,
itemCount: _itemCount,
itemBuilder: (context, itemIndex) {
return _makePage(context, itemIndex);
},
)
],
),
);
}
Widget _makePage(BuildContext context, int itemIndex) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
height: MediaQuery.of(context).size.height /4,
width: MediaQuery.of(context).size.width * 0.8,
color: Colors.green,
child: Image.asset(imgEx[itemIndex], ),
),
);
}
}
答案 0 :(得分:1)
您需要将图像放在绿色BoxDecoration
的{{1}}中:
Container
您可以将宽度和高度放在容器的约束中:
Widget _makePage(BuildContext context, int itemIndex) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
height: MediaQuery.of(context).size.height /4,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage(imgEx[itemIndex]),
fit: BoxFit.cover
)
)
),
);
}
答案 1 :(得分:0)
根据您的需要,只需更改height
和width
,就可以解决问题,
Widget _showMenuPage(BuildContext context) {
final _itemCount = imgEx.length;
return Container(
height: MediaQuery.of(context).size.height / 3,
width: MediaQuery.of(context).size.width * 0.8,
color: Colors.grey[300],
child: Stack(
children: [
PageView.builder(
pageSnapping: false,
controller: _controller,
itemCount: _itemCount,
itemBuilder: (context, itemIndex) {
return _makePage(context, itemIndex);
},
)
],
),
);
答案 2 :(得分:0)
Widget _makePage(BuildContext context, int itemIndex) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 70),
child: Container(
decoration: BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage(imgEx[itemIndex]),fit: BoxFit.cover)),
),
);}
我仍然不明白为什么容器的大小不会随着高度或BoxConstraints的变化而改变,但是我通过添加更多的填充获得了结果-EdgeInsets.symmetric(水平:20.0,垂直:70),