带有动画儿童尺寸的 Flutter PageView.builder答案

【问题标题】：Flutter PageView.builder with animated Children sizes带有动画儿童尺寸的 Flutter PageView.builder
【发布时间】：2019-09-25 14:27:36
【问题描述】：

我正在尝试重新创建：我已经尝试过PageView.builder，并且已经走到了这一步（对不起颜色的丑陋，但它是出于可视化目的）：

这是代码：

Container(
    height: 40 * 2 + 100.0,
    child: PageView.builder(

      scrollDirection: Axis.horizontal,
      controller: controller,
      itemCount: 9,
      itemBuilder: (context, index) {
        double value = 1.0;

        try {
          value = controller.hasClients
              ? controller.page - index
              : 1.0;
        } catch (e) {
          value = 1.0;
        }
        value = value.abs().clamp(0.0, 1.0);
        value = 1 - value;

        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 6.0),
          child: Container(
            width: value == 1.0 ? 80.0 : 60.0,
            height: 30.0,
            color: Color.lerp(Colors.green,
                Colors.red, value),
            child: Center(
                child: Text(
                  index.toString(),
                  style: TextStyle(

                      color: Color.lerp(
                          Colors.red, Colors.black, value),
                      fontSize:  lerpDouble(20.0, 40.0, value)),
                )),
          ),
        );
      },

    ))

控制器变量是这样的：

controller = new PageController(initialPage: 5, viewportFraction:  1/4);
controller.addListener(() {
  setState(() {});

如您所见，我设法将颜色和 textSize 更改为“选定”项（红色项），但即使我尝试将其大小设置为更大，它也没有任何效果。我尝试使用 ListView.builder 设置不同的大小，但我没有页面对齐和默认的初始页面，所以我选择了退出。

希望一切都清楚。

有没有可能，如果可以，我该怎么做？

【问题讨论】：

标签： dart flutter pageviews

【解决方案1】：

我知道这是一个老问题，但您可以通过更改容器的边距来更改宽度和高度。您基本上必须通过“值”变量的值更改一个容器（填充小部件内的这个容器）边距值，而且我强烈建议使用 AnimatedContainer 进行开箱即用的动画。将此代码添加到您的容器中：

EdgeInsets.only(bottom: 50, right: value == 1.0? 20 : 40, left: value == 1.0? 20 : 40, top: value == 1.0? 150 : 250),

您还应该从容器中删除此代码：

width: value == 1.0 ? 80.0 : 60.0,
height: 30.0,

【讨论】：