Флаттер PageView.builder с анимированными детскими размерами - PullRequest
Новая
       28

Флаттер PageView.builder с анимированными детскими размерами

0 голосов
/ 08 мая 2019

Я пытаюсь воссоздать это: enter image description here Я пробовал с PageView.builder и получил это далеко (извините за уродство цветов, но это для целей визуализации):

enter image description here

Это код: 

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(() {});

AsВы можете видеть, что мне удалось изменить цвет и textSize на «выбранный» элемент (красный), но даже если я попытаюсь установить его размер, он не будет иметь никаких эффектов.Я попытался с ListView.builder, который заставил меня установить разные размеры, но с ним у меня не было привязки страницы и начальной страницы по умолчанию, поэтому я отказался.

надеюсь, что все ясно.

Можно ли это сделать, и если да, то как я могу это сделать?

...