一切皆組件的Flutter,安能辨我是雄雌

来源:https://www.cnblogs.com/wenhanxiao/archive/2020/07/27/13384928.html

從一開始接觸Flutter,相信讀者都會銘記一句話,那就是——一切皆組件。今天我們就來體會一下這句話的神奇魔力,我們先從實際的產品需求說起。 我們先來看一個簡化的運行圖: 我們要實現如上圖所示的日期選擇器,App是iOS風格。 Flutter SDK自身有類似上圖的日期選擇器,但是Material ...


從一開始接觸Flutter,相信讀者都會銘記一句話,那就是——一切皆組件。今天我們就來體會一下這句話的神奇魔力,我們先從實際的產品需求說起。
我們先來看一個簡化的運行圖:

我們要實現如上圖所示的日期選擇器,App是iOS風格。
Flutter SDK自身有類似上圖的日期選擇器,但是Material Design的,於是我到Flutter庫中找到了一個名為flutter_date_pickers的三方庫,版本為0.1.4(https://pub.flutter-io.cn/packages/flutter_date_pickers)。
接下來就是集成這個庫了,具體代碼按照文檔直接複製:

@override
Widget build(BuildContext context) {
    DatePickerRangeStyles styles = DatePickerRangeStyles(
        selectedPeriodLastDecoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(10.0),
                bottomRight: Radius.circular(10.0))),
        selectedPeriodStartDecoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
        ),
        selectedPeriodMiddleDecoration:
            BoxDecoration(color: Colors.yellow, shape: BoxShape.rectangle),
    );
    return CupertinoPageScaffold(
                child: WeekPicker(
                    selectedDate: DateTime.now(),
                    onChanged: (dateRange) {},
                    firstDate: DateTime.now().subtract(Duration(days: 10)),
                    lastDate: DateTime.now().add(Duration(minutes: 10)),
                    datePickerStyles: styles)
    );
}

本來以為可以正常運行的,結果整個App崩潰了。報錯堆棧信息如下:

The following NoSuchMethodError was thrown building WeekPicker(dirty, dependencies: [_LocalizationsScope-[GlobalKey#678bc]]):
The getter 'firstDayOfWeekIndex' was called on null.
Receiver: null
Tried calling: firstDayOfWeekIndex

接著,根據堆棧信息找到代碼出錯位置,發現是這個庫中week_picker.dart文件中出現問題,下麵的代碼是問題所在:

MaterialLocalizations localizations = MaterialLocalizations.of(context);

ISelectablePicker<DatePeriod> weekSelectablePicker = WeekSelectable(
    selectedDate,
    datePickerStyles.firstDayOfeWeekIndex ?? localizations.firstDayOfWeekIndex,
    firstDate,
    lastDate,
    selectableDayPredicate: selectableDayPredicate
);

很明顯,這裡使用了MaterialLocalizations對象localizations,而MaterialLocalizations.of(context);方法返回了null,所以在接下來的代碼中拋出了空指針異常。
解決的方法很簡單,只要修改源碼,如果通過MaterialLocalizations來初始化localizations得到null,那麼就通過CupertinoLocalizations來初始化它就行了。具體代碼如下:

CupertinoLocalizations localizations = CupertinoLocalizations.of(context);

在接下來的使用時,替換為:

localizations.datePickerDateOrder.index

即可。
但是,這畢竟需要改第三方庫的源代碼,有沒有辦法不改源碼呢?答案是肯定的。
我們一開始就提到一切皆組件的概念,那麼,有沒有可能App依然使用iOS風格,然後把MaterialApp嵌套到CupertinoPageScaffold中呢?換一種說法,我們可不可以把MaterialApp和與之相關的Scaffold當做普通的組件,被CupertinoPageScaffold所包含呢?來看下麵的代碼:

@override
Widget build(BuildContext context) {
DatePickerRangeStyles styles = DatePickerRangeStyles(
    selectedPeriodLastDecoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0))),
    selectedPeriodStartDecoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
    ),
    selectedPeriodMiddleDecoration:
        BoxDecoration(color: Colors.yellow, shape: BoxShape.rectangle),
);
return CupertinoPageScaffold(
    child: MaterialApp(
        home: Scaffold(
        	appBar: CupertinoNavigationBar(middle: Text('Incredible Flutter')),
            body: WeekPicker(
                selectedDate: DateTime.now(),
                onChanged: (dateRange) {},
                firstDate: DateTime.now().subtract(Duration(days: 10)),
                lastDate: DateTime.now().add(Duration(minutes: 10)),
                datePickerStyles: styles))));
}

仔細閱讀上述代碼,可見:我們只是在return語句中增加了MaterialApp和Scaffold組件,重新運行程式,結果可以正常運行了。
另外還要註意,Scaffold中的appBar,我們經常給定的是AppBar對象,但為了實現iOS的界面風格,我們將其值改為CupertinoNavigationBar,也是沒有問題的。
好了,本次分享到此結束,希望上述內容能夠幫到你。


您的分享是我們最大的動力!

更多相關文章
  • 在.net開發中我們經常會用到SQL Server,微軟的SQL Server其實還算不錯,而且其Developer(開發者版)也免費對用戶使用,但是在安裝的過程中,尤其是在沒有之前版本的全新安裝時,往往會出現很多問題,在本文中我將詳細再現整個安裝流程,並對出現的問題給出解決辦法。 ...
  • DECLARE @tbl nvarchar(265) SELECT @tbl = '' SELECT o.name,i.index_id, i.name, i.type_desc, substring(ikey.cols, 3, len(ikey.cols))AS key_cols, substri ...
  • SQL語句執行順序 From 表連接 on連接條件,形成新的虛擬表 where 篩選條件 group by 生成新的結果集合 group by 分組列表 having 分組後篩選 select 選出顯示的 order by 排序 limit 分頁/個數限制 子查詢順序 除了exists,先執行子查詢 ...
  • select c.unique_compiles as 將從該缺失索引組受益的編譯和重新編譯數, c.user_seeks as 建索引後可能的使用查找次數, c.user_scans as 建索引後可能的使用掃描次數, c.statement as 表名, c.equality_columns, ...
  • 為了更方便的操作elasticsearch,我們需要安裝kibana kibana提供了一個開發工具,可以很方便的操作elasticsearch 打開kibana官網下載頁面 https://www.elastic.co/cn/downloads/kibana 安裝kibana 修改kibana相關 ...
  • 最近登錄到Elasticsearch官網發現Elasticsearch已經更新到7.8的版本了,但是自己公司使用的還是6.4版本,查了下,發現7.X的版本與6.X的版本差別還挺大的,所以準備在自己的個人伺服器上搭建一個7.6的版本,提前瞭解一下新特性,為以後公司遷移到ES7.X提前做好準備,這裡把自 ...
  • 該系列上一篇文章《Elasticsearch必知必會的乾貨知識一:ES索引文檔的CRUD》 講瞭如何進行index的增刪改查,本篇則側重講解說明如何對index進行創建、更改、遷移、查詢配置信息等。 僅創建索引:PUT index PUT /index 添加欄位設置(mappings):PUT in ...
  • 一.PostgreSQL簡介 PostgreSQL資料庫一種關係型資料庫。是當前世界上最先進的開源關係型資料庫。 PostgreSQL使用的是一種客戶端/伺服器的模式。一次PostgreSQL會話由以下相關進程組成: 1.postgres:一個伺服器進程(該進程管理著資料庫文件,接收來自客戶端的連接 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...