pageView.builder 中的容器大小没有变化答案

【问题标题】：container size doesn't change in pageView.builderpageView.builder 中的容器大小没有变化
【发布时间】：2020-08-07 12:30:47
【问题描述】：

这是我的代码的结果。

我在PageView 小部件中使用了四个图像，并且由于某些图像的大小与另一张图片不同，我想通过 boxfit 来适应图片的大小。但是要做boxfit，图片的高度就这么长了。

所以我用 height 属性限制了Container，但无论我如何在 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], ),
      ),
    );
  }
}

【问题讨论】：

所以你想减少绿色容器？还是增加图片的高度？
stackoverflow.com/questions/54522980/…
哦，我想减少绿色容器

标签： flutter

【解决方案1】：

你需要把图片放到绿色Container的BoxDecoration：

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
          )
        )
      ),
    );
  }

可以把宽高放在容器的约束中：

child: Container(
  constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height /4,
            maxWidth: MediaQuery.of(context).size.width * 0.8,
          ),
...

【讨论】：

我很抱歉，但是当我尝试这个解决方案时，容器大小仍然相同..（长）
您是否在BoxConstraints 中设置了maxHeight？ @kw3136

【解决方案2】：

问题在于只需根据您的需要更改 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);
            },
          )
        ],
      ),
    );

【讨论】：

【解决方案3】：

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 变化，但我通过添加更多 Padding 得到了结果 - EdgeInsets.symmetric(horizontal: 20.0, vertical: 70)，

【讨论】：