我怎样才能在动画容器中的ImageDecoration中使用我的资产图像呢? 真的坚持住了。 几个小时以来我一直试图解决这个问题,但我无法找到一个解决方案。 我需要预先设定图像,因为图像不加载时,它是花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'),
)),
)
],
),
),
],
);
}
}
请尝试以下操作:
precacheImage(AssetImage("path"), context);
在_MyAppState类的initState方法中使用它
当你在发布模式下运行应用程序时,你会注意到更多的不同