以前用react-native
寫過一版識兔,當初寫識兔的時候就想過出視頻來講一下該怎麼架構RN項目,錄過幾集視頻,但最終仍是由於各類緣由放棄了。 後期也會以文章的形式,把開發RN過程當中的一些小技巧寫出來。react
在本系列文章中,會努力爲讀者梳理怎麼架構Flutter項目,儘量多的涉及flutter中的知識點與可能遇到的問題。git
flutter版識兔也已經開源,放在了github上,點擊跳轉。 react-native版識兔地址,點擊跳轉。github
若是在開發中遇到什麼問題,歡迎加入 flutter興趣交流羣 QQ羣:541020533react-native
該標題下,會將本文中涉及到的知識點作梳理數組
真實效果會比gif好一些,gif壓縮了畫質bash
效果圖網絡
在效果圖中,首頁分爲兩部分,頂部導航欄,中間內容。架構
這裏直接使用flutter自帶的
AppBar
建立導航欄。app
AppBar
是屬於Scaffold
的一個屬性方法,通常在開發flutter
中都會把Scaffold
放在最外層,用其提供的方便屬性搭建頁面框架。框架
AppBar
中提供了不少屬性/方法,這裏不作詳細講解,本系列文章中,只會講用到的方法,不會特別細緻的講組件提供的其餘方法。
Scaffold(
appBar: AppBar(
title: Text('識兔'),
),
),
複製代碼
效果圖中,中間內容包含了模糊背景圖片和帶有動畫的按鈕。 本文中,會實現背景圖片 + 模糊效果 + 中間按鈕。
效果圖中,首先實現的應該是背景圖,在flutter
中使用Image.network
就能夠加載網絡圖片了,因此咱們的初版代碼應該是這樣。
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('識兔'),
),
body: Image.network(
'http://ww1.sinaimg.cn/large/0065oQSqly1g2pquqlp0nj30n00yiq8u.jpg'),
),
);
}
複製代碼
效果圖
圖片和導航欄出來了,但並非圖片不是全屏的效果。這裏就要獲取屏幕的高度了。
在flutter
中獲取屏幕高度的方法有好幾種,這裏列出兩種。
widgets.dart
自帶的MediaQuery
,使用以下。Size size = MediaQuery.of(context).size
final width = size.width;
final height = size.height;
複製代碼
import 'dart:ui'
提供的window.physicalSize
,返回值同上。Size physicalSize = ui.window.physicalSize;
複製代碼
只拿到屏幕寬度就夠了嗎?並非,還須要給Image
設置fit
屬性,這裏直接給最終代碼,對於fit
的其餘效果,能夠自行測試。
body: Image.network(
'http://ww1.sinaimg.cn/large/0065oQSqly1g2pquqlp0nj30n00yiq8u.jpg',
fit: BoxFit.fitHeight,
height: size.height,
)
複製代碼
效果圖
在實現模糊以前,須要先調整下層級關係。 爲何要這樣呢? 由於接下來的模糊效果實際上是覆蓋在背景圖上面的。
Stack
容許子組件堆疊,咱們將最外層改成Stack
。代碼以下
body: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Image.network(
"http://ww1.sinaimg.cn/large/0065oQSqly1g2pquqlp0nj30n00yiq8u.jpg",
fit: BoxFit.fitHeight,
height: size.height,
),
],
),
複製代碼
能夠看到Stack
中擁有的children
返回的是一個數組,這樣咱們能夠接下來的步驟了。
BackdropFilter
是flutter
中用來實現高斯模糊效果,在BackdropFilter
源碼中,會發現其必需要傳filter
,在源碼中還推薦使用ImageFilter.blur
來實現高斯模糊。 這裏直接使用ImageFilter.blur
來實現想要的效果。
body: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Image.network(
"http://ww1.sinaimg.cn/large/0065oQSqly1g2pquqlp0nj30n00yiq8u.jpg",
fit: BoxFit.fitHeight,
height: size.height,
),
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5, // x軸的模糊程度
sigmaY: 5, // y軸的模糊程度
),
child: Container(
color: Colors.white.withOpacity(0.1),
),
),
],
),
複製代碼
效果圖
flutter
中按鈕提供了好幾種,前三個都是集成自MaterialButton
,但使用方式大同小異,只不過屬性有點差異,本文用的是RaisedButton
,由於其簡單粗暴,但其餘幾個按鈕,除了IconButton
外,屬性都大同小異,能夠自行測試。 但這些都是flutter
提供的Button
,若是咱們想要某個Widget
加點擊事件該怎麼弄呢? 稍後的文章中會有講解。
OutlineButton(
child: Text(
'點我搜索',
style: TextStyle(color: Colors.white),
),
onPressed: () {}, // 點擊事件, 必填項
color: Colors.lightBlue, // 按鈕顏色
shape: shape: StadiumBorder(), // 圓角
),
複製代碼
最終效果圖
本文中,只寫出了首頁搭建,下一篇文章會講目錄結構和按鈕的動畫效果。歡迎關注。
若是在開發中遇到什麼問題,歡迎加入 flutter興趣交流羣 QQ羣:541020533