從0到1使用Flutter重構識兔(1)

前言

以前用react-native寫過一版識兔,當初寫識兔的時候就想過出視頻來講一下該怎麼架構RN項目,錄過幾集視頻,但最終仍是由於各類緣由放棄了。 後期也會以文章的形式,把開發RN過程當中的一些小技巧寫出來。react

在本系列文章中,會努力爲讀者梳理怎麼架構Flutter項目,儘量多的涉及flutter中的知識點與可能遇到的問題。git

flutter版識兔也已經開源,放在了github上,點擊跳轉。 react-native版識兔地址,點擊跳轉github

若是在開發中遇到什麼問題,歡迎加入 flutter興趣交流羣 QQ羣:541020533react-native

目錄

該標題下,會將本文中涉及到的知識點作梳理數組

  1. 搭建識兔首頁
  2. 實現背景圖片模糊
  3. 實現圓角按鈕
  4. 實現圓角按鈕進場效果

UI效果

真實效果會比gif好一些,gif壓縮了畫質bash

效果圖網絡

搭建識兔首頁

在效果圖中,首頁分爲兩部分,頂部導航欄,中間內容。架構

1. 頂部導航欄

這裏直接使用flutter自帶的AppBar建立導航欄。app

AppBar是屬於Scaffold的一個屬性方法,通常在開發flutter中都會把Scaffold放在最外層,用其提供的方便屬性搭建頁面框架。框架

AppBar中提供了不少屬性/方法,這裏不作詳細講解,本系列文章中,只會講用到的方法,不會特別細緻的講組件提供的其餘方法。

Scaffold(
    appBar: AppBar(
      title: Text('識兔'),
    ),
),
複製代碼

2. 中間內容

效果圖中,中間內容包含了模糊背景圖片和帶有動畫的按鈕。 本文中,會實現背景圖片 + 模糊效果 + 中間按鈕。

背景圖片(Image)

效果圖中,首先實現的應該是背景圖,在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容許子組件堆疊,咱們將最外層改成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)

BackdropFilterflutter中用來實現高斯模糊效果,在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),
            ),
        ),
    ],
),
複製代碼

效果圖

中間按鈕(RaisedButton、FlatButton、OutlineButton,IconButton)

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

相關文章
相關標籤/搜索