Flutter-AnimatedBuilder，首次加载时会出现动画/小工具错误

本文介绍了Flutter-AnimatedBuilder，首次加载时会出现动画/小工具错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我第一次加载构建器时，我的所有卡都一秒钟都保持相同大小，然后又跳到正确的大小和比例，有人知道我如何进行调整以使它们的大小正确吗?走吧?

when I load the builder for the first time , all of my cards are the same size for a second before jumping to the correct sizes and proportions ,does anyone know how I can adjust this so that they are in the right sizes from the get go?

当我更换填充和放大器; Card小部件只有一个装满图像的容器，它似乎以正确的大小生成，但是我需要它们成为我以后的布局的卡片.

Strangely enough when I replace my Padding & Card widget with just a container full of the images, it seems to spawn in the correct sizes , however I need them to be cards for my later layout.

(我还计划将所有代码都放到小部件类中，而不是将所有这些代码都放到我的主代码中，而只是返回一个CustomScroller.)

(I also plan on throwing it all into a widget class instead of putting all this code in my main and rather just returning a CustomScroller.)

请检查以下Gif:

动画小故障Gif 仅使用容器时，动画Gif效果很好

任何对解决初始加载问题的帮助将大受赞赏！ :)

Any help fixing the initial loading would be wildly appreciated! :)

import 'package:flutter/material.dart';
import 'package:blink/widget/customScroller.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PageController pageController;

  List<String> images = [
    "https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXRfe-GzBFRQzv8udHMCshqQGAj2JD5SGsR7CoyWP_HqFapJCYSA&s",
    "https://ichef.bbci.co.uk/wwfeatures/live/976_549/images/live/p0/7w/b9/p07wb9xk.jpg",
    "https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&w=1000&q=80"
  ];

  @override
  void initState() {
    // TODO: implement initState
    pageController = PageController(initialPage: 1, viewportFraction: 0.77);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: PageView.builder(
          controller: pageController,
            itemCount: images.length,
            itemBuilder: (context,position){
            return customScroller(position);
            }),);
  }

  customScroller(int index) {
    return AnimatedBuilder(
      animation: pageController,
      builder: (context, widget) {
        double val = 1;

        if(pageController.position.haveDimensions){
          val = pageController.page - index;
        val = 1 - (val.abs()*0.3).clamp(0.0,1.0);}

        return Center(
          child: SizedBox(
            height: Curves.easeInOut.transform(val) *300,
              width: Curves.easeInOut.transform(val) *400,
            child: widget,
          ),
        );
      },
//      child: Container(
//        margin: EdgeInsets.all(10),
//        child: Image.network(images[index],fit:BoxFit.cover),
//      ),
// When I use the above code as the child instead of the padding with the card in it seems to spawn correctly
        child: Padding(
          padding: EdgeInsets.fromLTRB(0, 15, 0, 15),
          child: Container(
            child: Card(
              color: Colors.white70,
              elevation: 9,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
              ),
              clipBehavior: Clip.antiAlias,
              child: Container(
                color: Colors.white,
                padding: EdgeInsets.all(5),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Container(
                        height: double.infinity,
                        child: ClipRRect(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              topRight: Radius.circular(0.0),
                              bottomRight: Radius.circular(0.0),
                              bottomLeft: Radius.circular(20.0)),
                          child: new Image.network(
                            images[index],
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        )

    );
  }
}

推荐答案

您缺少的是AnimatedBuilder构建方法仅在存在某些动画时才运行.在一开始不是.所以这就是为什么如果您滚动而不是之前滚动，尺寸会改变的原因.

What you are missing is that the AnimatedBuilder build method runs only if there is some animation. Not at the very beginning. So this is why the size changes if you are scrolling and not before.

您的子窗口小部件未包装有转换器窗口小部件(或大小框)，因此所有索引都保持不变(在开始时-构建器尚未运行).在我的示例中，我还用SizedBox包裹了孩子，并给了val一些初始值.

Your child widget is not wrapped with a transformer widget (or sized box) so it stays the same for all indexes (at the beginnen - the builder has not run yet). In my example I wrapped the child also with a SizedBox and i gave val some initial value.

工作示例:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PageController pageController;

  List<String> images = [
    "https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXRfe-GzBFRQzv8udHMCshqQGAj2JD5SGsR7CoyWP_HqFapJCYSA&s",
    "https://ichef.bbci.co.uk/wwfeatures/live/976_549/images/live/p0/7w/b9/p07wb9xk.jpg",
    "https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&w=1000&q=80"
  ];

  @override
  void initState() {
    // TODO: implement initState
    pageController = PageController(initialPage: 1, viewportFraction: 0.77);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: PageView.builder(
          controller: pageController,
          itemCount: images.length,
          itemBuilder: (context, position) {
            return customScroller(position);
          }),
    );
  }

  customScroller(int index) {
    Widget child = Padding(
      padding: EdgeInsets.fromLTRB(0, 15, 0, 15),
      child: Container(
        child: Card(
          color: Colors.white70,
          elevation: 9,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          clipBehavior: Clip.antiAlias,
          child: Container(
            color: Colors.white,
            padding: EdgeInsets.all(5),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: double.infinity,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          topRight: Radius.circular(0.0),
                          bottomRight: Radius.circular(0.0),
                          bottomLeft: Radius.circular(20.0)),
                      child: new Image.network(
                        images[index],
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
    double val = (index == 1)?1:0.7;

    return AnimatedBuilder(
        animation: pageController,
        builder: (context, widget) {
          if (pageController.position.haveDimensions) {
            val = pageController.page - index;
            val = 1 - (val.abs() * 0.3).clamp(0.0, 1.0);
          }
          print("val: $val; index: $index");
          return _getTransformedSizedBox(val, widget);
        },
//      child: Container(
//        margin: EdgeInsets.all(10),
//        child: Image.network(images[index],fit:BoxFit.cover),
//      ),
// When I use the above code as the child instead of the padding with the card in it seems to spawn correctly
        child: _getTransformedSizedBox(val, child));
  }

  _getTransformedSizedBox(double val, Widget widget) {
    return Center(
      child: SizedBox(
        height: Curves.easeInOut.transform(val) * 300,
        width: Curves.easeInOut.transform(val) * 400,
        child: widget,
      ),
    );
  }
}

这篇关于Flutter-AnimatedBuilder，首次加载时会出现动画/小工具错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..