大家好, 今天我們來用Flutter來實現(xiàn)一個Android中的卡片式的ViewPager.
- 代碼總數(shù)100行. 核心代碼60行.
- 閱讀時間8分鐘.
使用到的Flutter技術為:
- PageView, StatefulWidget, Gradient和Snackbar.
先上效果圖.
直接run代碼如下圖.
PageView正常效果圖
點擊infinite button切換gradient效果:
PageView Gradient效果圖
點擊每一個卡片, 跳出SnackBar顯示description如下:
全屏SnackBar
感覺很簡單對吧. 那我們先回顧一下, 在Android里面我們要實現(xiàn)這樣的效果的做法通常是什么樣的呢?
- 做一個viewpager.
- 一組Fragment.
- 每個Fragment綁定一個xml.
- 最后填充viewpager.
如果我們用Flutter實現(xiàn)起來就非常簡單. 我們來過一下:
- 第一步, 準備我們的images和會在點擊時使用在SnackBar的descriptions. 這里我用了我每周五都追的動漫一人之下的幾張百度來的圖. 什么? 你不知道一人之下? 快去補番!!!
final Listimages = [
'images/wallpapers/wallpaper1.jpg',
'images/wallpapers/wallpaper2.jpg',
'images/wallpapers/wallpaper3.jpg',
];
final List descriptions = [
'不搖碧蓮准潭，干翻蒼穹',
'周五快到了挽鞠，準備追更新',
'社會我寶姐对途，人美路子野',
];
- 做個App, 這里我用了MaterialApp和ThemeData設置為deepOrange.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gallery Demo',
theme: ThemeData(primarySwatch: Colors.deepOrange),
home: DisplayPage(),
);
}
}
- 做個StatefulWidget, 因為我們想要維護一個_isAddGradient. 通過這個變量我們想通知widget tree變?yōu)間radient和非gradient的兩種狀態(tài).
class DisplayPage extends StatefulWidget {
@override
_DisplayPageState createState() => new _DisplayPageState();
}
class _DisplayPageState extends State<DisplayPage> {
bool _isAddGradient = false;
///
}
- 我們先做一個FloatingActionButton. 這個是Scaffold提供給我們的. 我們用這個button來改變_isAddGradient.
FloatingActionButton _floatingActionButton = FloatingActionButton(
onPressed: () {
_isAddGradient = !_isAddGradient;
setState(() {
_isAddGradient;
});
},
tooltip: 'Switch Gradient Effect',
child: Icon(Icons.all_inclusive),
);
- 做個DecoratedBox, 可以實現(xiàn)我們要的gradient效果. 這里我們用一個LinearGradient. 從bottomRight到topLeft結束.
var decorationBox = DecoratedBox(
decoration: _isAddGradient
? BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.bottomRight,
end: FractionalOffset.topLeft,
colors: [
Color(0x00000000).withOpacity(0.9),
Color(0xff000000).withOpacity(0.01),
],
),
)
: BoxDecoration(),
);
- 在_DisplayState的build function返回Scaffold和所有主體邏輯. 這里我們用PageView.builder來建立PageView. 我們給每一個item加上Padding. 加上GestureDetector來實現(xiàn)點擊顯示SnackBar. 我們在SnackBar的Text上加上Center讓它充滿全屏.
return Scaffold(
floatingActionButton: _floatingActionButton,
body: Center(
child: SizedBox.fromSize(
size: Size.fromHeight(550.0),
child: PageView.builder(
controller: PageController(viewportFraction: 0.8),
itemCount: images.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 8.0,
),
child: GestureDetector(
onTap: () {
Scaffold.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.deepOrangeAccent,
duration: Duration(milliseconds: 800),
content: Center(
child: Text(
descriptions[index],
style: TextStyle(fontSize: 25.0),
),
),
));
},
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(8.0),
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
images[index],
fit: BoxFit.cover,
),
decorationBox,
],
),
),
),
);
},
),
),
),
);
- 別忘了在main函數(shù)里run下我們的app.
void main() => runApp(MyApp());
好了, 打完收工. 是不是Flutter很簡單幾行代碼我們就實現(xiàn)了Android里的ViewPager了呢?
Source Code下載: 點我去GitHub下載你最愛的源碼
歐了, 謝謝觀賞浪蹂，大家加油铃彰！
