最近情人節好像要沒多久了欸，不管你有沒有女朋友都可以學起來哦
哈，偶然看到該組件，突然覺得可以用來表白欸，我的小粉絲們，收藏學起來吧
其實以前我也寫過一個類似的跳動的心的代碼，只不過那個時候是用的css，放一個鏈接：link.
今天就用flutter再寫一個
animatedcontainer 是一個自帶影片功能的container，
我們只需要給該組件提供影片的開始和結束值，就可以讓它動起來，
（一）效果圖：
（二）實作原理：
利用可以變化的AnimatedContainer組件，我們準備好一張png圖，（免摳圖），把圖片給你們
讓組件在放大縮小的變化程序過渡到我們準備好的愛心上，然后這個愛心的圖片就可以變化啦
（三）代碼實作
復制即可運行，圖片需要組態檔配置的，看鏈接：link.
import 'package:flutter/material.dart';
void main() => (runApp(MyApp()));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: AnimatedContainerPage(),
);
}
}
class AnimatedContainerPage extends StatefulWidget {
@override
_AnimatedContainerPageState createState() => _AnimatedContainerPageState();
}
class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
bool click = false;
@override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
onTap: () {
setState(() {
click = !click;
});
},
child: AnimatedContainer(
//把影片作用在寬高上
height: click ? 200 : 100,
width: click ? 200 : 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/aixin.png'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(
click ? 200 : 0,
))),
duration: Duration(seconds: 3),
curve: Curves.linear,
onEnd:(){//結束后的狀態
setState(() {
click=!click;
});
} ,
),
),
);
}
}
今天就這樣，我的小粉絲們，拜拜，啾咪~>_<
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/256859.html
標籤：區塊鏈