一切皆組件的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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...