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

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

從一開始接觸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,也是沒有問題的。
好了,本次分享到此結束,希望上述內容能夠幫到你。


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

-Advertisement-
Play Games
更多相關文章
  • 在.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:一個伺服器進程(該進程管理著資料庫文件,接收來自客戶端的連接 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 準備開個系列來聊一下 PerfView 這款工具,熟悉我的朋友都知道我喜歡用 WinDbg,這東西雖然很牛,但也不是萬能的,也有一些場景他解決不了或者很難解決,這時候藉助一些其他的工具來輔助,是一個很不錯的主意。 很多朋友喜歡在項目中以記錄日誌的方式來監控項目的流轉情況,其實 CoreCL ...
  • 什麼是工業物聯網網關 工業物聯網網關是連接工業場景本地設備(如PLC、掃碼槍、機器人、數控機床等)與遠端業務系統(如SCADA系統、MES系統等)之間的硬體設備或軟體程式。終端設備和遠端業務系統之間的所有數據通信都通過工業物聯網網關來實現。 我們為什麼需要工業物聯網網關 因為從事汽車工業行業,在我們 ...
  • 在.NET Core的依賴註入框架中,服務註冊的信息將會被封裝成ServiceDescriptor對象,而這些對象都會存儲在IServiceCollection介面類型表示的集合中,另外,IServiceCollection介面類型預設使用的實現類型為ServiceCollection。這樣來看,實 ...
  • 如果業務邏輯比較簡單的話,一條主管道就夠了,確實用不到分支管道。不過當業務邏輯比較複雜的時候,有時候我們可能希望根據情況的不同使用特殊的一組中間件來處理 HttpContext。這種情況下如果只用一條管道,處理起來會非常麻煩和混亂。此時就可以使用 Map/MapWhen/UseWhen 建立一個分支 ...
  • .NET nanoFramework 安裝教程 準備材料​ esp32單片機(支持wifi藍牙) 安卓數據線(需要支持傳輸) 註意!請先安裝esp32驅動程式​ ESP32驅動鏈接 安裝 .NET nanoFramework固件快閃記憶體​ 安裝工具 dotnet tool install -g nano ...
  • Redis是大規模互聯網應用常用的記憶體高速緩存資料庫,它的讀寫速度非常快,據官方 Bench-mark的數據,它讀的速度能到11萬次/秒,寫的速度是8.1萬次/秒。 1. 認識Spring Cache 在很多應用場景中通常是獲取前後相同或更新不頻繁的數據,比如訪問產品信息數據、網頁數據。如果沒有使用 ...
  • 1、應用場景 1.1 kafka場景 ​ Kafka最初是由LinkedIn公司採用Scala語言開發,基於ZooKeeper,現在已經捐獻給了Apache基金會。目前Kafka已經定位為一個分散式流式處理平臺,它以 高吞吐、可持久化、可水平擴展、支持流處理等多種特性而被廣泛應用。 ​ Apache ...
  • Python帶我起飛——入門、進階、商業實戰_ 免費下載地址 內容簡介 · · · · · · 《Python帶我起飛——入門、進階、商業實戰》針對Python 3.5 以上版本,採用“理論+實踐”的形式編寫,通過大量的實例(共42 個),全面而深入地講解“Python 基礎語法”和“Python ...
  • 原文連接:https://www.zhoubotong.site/post/67.html Go 標準庫的net/url包提供的兩個函可以直接檢查URL合法性,不需要手動去正則匹配校驗。 下麵可以直接使用ParseRequestURI()函數解析URL,當然這個只會驗證url格式,至於功能變數名稱是否存在或 ...
  • 多商戶商城系統,也稱為B2B2C(BBC)平臺電商模式多商家商城系統。可以快速幫助企業搭建類似拼多多/京東/天貓/淘寶的綜合商城。 多商戶商城系統支持商家入駐加盟,同時滿足平臺自營、旗艦店等多種經營方式。平臺可以通過收取商家入駐費,訂單交易服務費,提現手續費,簡訊通道費等多手段方式,實現整體盈利。 ...