Question

如何预缓存在AnimatedContainer中的ImageDecoration中使用的资产图像？真的坚持了这一点。数小时以来一直在尝试解决此问题，但我无法解决此问题。我需要预缓存图像，因为滑动时COZ图像无法加载，我感觉用户可能不喜欢它需要2-3秒才能加载。

final PageController ctrl = PageController(viewportFraction: 0.8);

class PageViewContent extends StatefulWidget {
  @override
  _PageViewContentState createState() => _PageViewContentState();
}


class _PageViewContentState extends State<PageViewContent> {

  @override
  Widget build(BuildContext context) {
    return PageView(
      physics: const BouncingScrollPhysics(),
      controller: ctrl,
      children: <Widget>[
        GestureDetector(
          onTap: () {
            Navigator.push(
                context, new MaterialPageRoute(builder: (context) => Home3()));
          },
          child: Stack(
            children: <Widget>[
//              image1,
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeOutQuint,
                margin: EdgeInsets.only(top: 50, bottom: 80, right: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/med.jpg'),
                    )),

              ),
              Padding(
                padding:
                const EdgeInsets.only(top: 20.0, right: 35, bottom: 20),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Medicine Requests',
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontSize: 30,
                          fontFamily: 'Barlow'),
                    )),
              )
            ],
          ),
        ),
        GestureDetector(
          onTap: () {
//            print('pressed 1');
            Navigator.push(
                context, new MaterialPageRoute(builder: (context) => Home1()));
          },
          child: Stack(
            children: <Widget>[
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeOutQuint,
                margin: EdgeInsets.only(top: 50, bottom: 80, right: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/heart.jpg'),
                    )),
              ),
              Padding(
                padding:
                const EdgeInsets.only(top: 20.0, right: 35, bottom: 20),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Plasma Requests',
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontSize: 36,
                          fontFamily: 'Barlow'),
                    )),
              )
            ],
          ),
        ),
        GestureDetector(
          onTap: () {
            Navigator.push(
                context, new MaterialPageRoute(builder: (context) => Home2()));
          },
          child: Stack(
            children: <Widget>[
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                curve: Curves.easeOutQuint,
                margin: EdgeInsets.only(top: 50, bottom: 80, right: 30),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage('assets/images/hands.jpg'),
                    )),
              ),
              Padding(
                padding:
                const EdgeInsets.only(top: 20.0, right: 35, bottom: 20),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Text(
                      'Plasma Donors',
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontSize: 36,
                          fontFamily: 'Barlow'),
                    )),
              )
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

尝试：

precacheImage(AssetImage("path"), context);

在 _MyAppState 类的 initState 方法中使用它

在发布模式下运行应用时，您会发现更多差异

预加载资产图像抖动

1 个答案: