dart - 具有动画子级大小的Flutter PageView.builder

Question

我正在尝试重新创建:

我已经尝试过使用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 变量是这样的:

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

如您所见，我设法将color和textSize更改为“selected”项(红色项)，但是即使我尝试将其大小设置为更大，也没有任何效果。我尝试使用ListView.builder，它使我设置了不同的大小，但是它没有页面捕捉和默认的初始页面，因此我选择退出。

希望一切都清楚。

是否可以这样做，如果可以，我该怎么做？

Answer 1

我知道这是一个老问题，但是您可以通过更改容器的边距来更改宽度和高度。您必须从根本上更改一个容器(位于Padding小部件内的一个容器)，以“value”变量的值作为边距值，此外，我强烈建议使用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,