你知道嗎，Flutter內置了10多種show

来源:https://www.cnblogs.com/mengqd/archive/2020/03/19/12526884.html
-Advertisement-
Play Games

註意：無特殊說明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 showDialog showDialog 用於彈出Material風格對話框，基本用法如下： 效果如下： 通常返回 組件，比如 和`AlertDialog` ...


註意：無特殊說明，Flutter版本及Dart版本如下：

  • Flutter版本： 1.12.13+hotfix.5
  • Dart版本： 2.7.0

showDialog

showDialog 用於彈出Material風格對話框，基本用法如下：

showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        ...
      );
    }
);

效果如下：

builder通常返回Dialog組件，比如SimpleDialog和AlertDialog。

useRootNavigator參數用於確定是否將對話框推送到給定“context”最遠或最接近的Navigator。預設情況下，useRootNavigator為“true”，被推送到根Navigator。如果應用程式有多個Navigator，關閉對話框需要使用

Navigator.of(context, rootNavigator: true).pop(result)

而不是

Navigator.pop(context, result)

barrierDismissible參數確認點擊提示框外部區域時是否彈出提示框，預設true。

showCupertinoDialog

showCupertinoDialog 用於彈出ios風格對話框，基本用法如下：

showCupertinoDialog(
    context: context,
    builder: (context) {
      return CupertinoAlertDialog(
       ...
      );
    });

效果如下：

builder通常返回CupertinoDialog或者CupertinoAlertDialog。

showGeneralDialog

如果上面2種提示框不滿足你的需求，還可以使用showGeneralDialog自定義提示框，事實上，showDialog和showCupertinoDialog也是通過showGeneralDialog實現的，基本用法如下：

showGeneralDialog(
    context: context,
    barrierDismissible:true,
    barrierLabel: '',
    transitionDuration: Duration(milliseconds: 200),
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return Center(
        child: Container(
          height: 300,
          width: 250,
          color: Colors.lightGreenAccent,
        ),
      );
    });

效果如下：

加上背景顏色：

showGeneralDialog(
    context: context,
    barrierColor: Colors.black.withOpacity(.5),
    ...
  )

效果如下：

barrierDismissible:是否可以點擊背景關閉。

barrierColor：背景顏色

transitionDuration：動畫時長，

transitionBuilder是構建進出動畫，預設動畫是漸隱漸顯，構建縮放動畫代碼如下：

showGeneralDialog(
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(scale: animation, child: child);
    },
    ...
  )

效果如下：

showAboutDialog

AboutDialog用於描述當前App信息，底部提供2個按鈕：查看許可按鈕和關閉按鈕。AboutDialog需要和showAboutDialog配合使用，用法如下：

showAboutDialog(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: '應用程式',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright 老孟，一枚有態度的程式員',
  children: <Widget>[
    Container(
      height: 30,
      color: Colors.red,
    ),
    Container(
      height: 30,
      color: Colors.blue,
    ),
    Container(
      height: 30,
      color: Colors.green,
    )
  ],
);

效果如下：

屬性說明如下：

  • applicationIcon：應用程式的圖標。
  • applicationName：應用程式名稱。
  • applicationVersion：應用程式版本。
  • applicationLegalese：著作權（copyright）的提示。
  • children：位置如上圖的紅藍綠色的位置。

所有的屬性都需要手動設置，不是自動獲取的。

下麵的2個按鈕根據應用程式支持的語言顯示相應的語言，比如顯示中文方法如下：

  1. 在pubspec.yaml中配置支持國際化：
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  1. 在MaterialApp中配置當前區域：
MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
      locale: Locale('zh'),
      ...
  )

此時效果：

此時點擊查看許將會調用showLicensePage,相關效果可以查看showLicensePage。

showLicensePage

此控制項基本不會用到，瀏覽一下即可。

LicensePage用於描述當前App許可信息，LicensePage需要和showLicensePage配合使用，用法如下：

showLicensePage(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: '應用程式',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright 老孟，一枚有態度的程式員',
);

效果如下：

下麵的英文我們是無法更改的。

showBottomSheet

在最近的Scaffold父組件上展示一個material風格的bottom sheet，位置同Scaffold組件的bottomSheet，如果Scaffold設置了bottomSheet，調用showBottomSheet拋出異常。

基本用法如下：

showBottomSheet(
    context: context,
    builder: (context) {
      return Container(height: 200, color: Colors.lightBlue);
    });

效果如下：

設置其背景顏色、陰影值、形狀：

showBottomSheet(
    context: context,
    backgroundColor: Colors.lightGreenAccent,
    elevation:20,
    shape: CircleBorder(),
    builder: (context) {
      return Container(height: 200);
    });

效果如下：

通常情況下，我們希望直接從底部彈出，showModalBottomSheet提供了直接從底部彈出的功能。

showModalBottomSheet

從底部彈出，通常和BottomSheet配合使用，用法如下：

showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return BottomSheet(...);
        });

效果如下：

設置背景、陰影、形狀：

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.lightBlue,
    elevation: 10,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
    ...
  )

效果如下：

isDismissible:是否可以點擊背景關閉。

isScrollControlled參數指定是否使用可拖動的可滾動的組件，如果子組件是ListView或者GridView，此參數應該設置為true，設置為true後，最大高度可以占滿全屏。用法如下：

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('老孟$index'),
          );
        },
        itemExtent: 50,
        itemCount: 50,
      );
    });

showCupertinoModalPopup

showCupertinoModalPopup 展示ios的風格彈出框，通常情況下和CupertinoActionSheet配合使用，用法如下：

showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return CupertinoActionSheet(
        title: Text('提示'),
        message: Text('是否要刪除當前項？'),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: Text('刪除'),
            onPressed: () {},
            isDefaultAction: true,
          ),
          CupertinoActionSheetAction(
            child: Text('暫時不刪'),
            onPressed: () {},
            isDestructiveAction: true,
          ),
        ],
      );
    }
);

效果如下：

filter參數可以對彈出框以外的區域做模糊或者矩陣操作，用法如下：

showCupertinoModalPopup(
    context: context,
    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    ...
  )

效果如下：

彈出框以外的區域有毛玻璃的效果。

showMenu

showMenu彈出一個Menu菜單，用法如下：

showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <PopupMenuEntry>[
      PopupMenuItem(child: Text('語文')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(
        child: Text('數學'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('英語')),
    ]);

position參數表示彈出的位置，效果如下：

彈出的位置在屏幕的左上角，我們希望彈出的位置在點擊按鈕的位置，因此需要計算按鈕的位置，計算如下：

final RenderBox button = context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
  Rect.fromPoints(
    button.localToGlobal(Offset(0, 0), ancestor: overlay),
    button.localToGlobal(button.size.bottomRight(Offset.zero),
        ancestor: overlay),
  ),
  Offset.zero & overlay.size,
);

你需要將按鈕單獨封裝為StatefulWidget組件，否則context代表的就不是按鈕組件。

showSearch

showSearch 是直接跳轉到搜索頁面，用法如下：

showSearch(context: context, delegate: CustomSearchDelegate());

class CustomSearchDelegate extends SearchDelegate<String>{
  @override
  List<Widget> buildActions(BuildContext context) {
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return null;
  }

}

使用showSearch，首先需要重寫一個SearchDelegate，實現其中的4個方法。

buildLeading表示構建搜索框前面的控制項，一般是一個返回按鈕，點擊退出，代碼如下：

@override
Widget buildLeading(BuildContext context) {
  return IconButton(
    icon: Icon(Icons.arrow_back,color: Colors.blue,),
    onPressed: (){
      close(context, '');
    },
  );
}

效果如下：

buildSuggestions是用戶正在輸入時顯示的控制項，輸入框放生變化時回調此方法，通常返回一個ListView，點擊其中一項時，將當前項的內容填充到輸入框，用法如下：

@override
Widget buildSuggestions(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('老孟 $index'),
        onTap: () {
          query = '老孟 $index';
        },
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: Random().nextInt(5),
  );
}

效果如下：

buildActions輸入框後面的控制項，一般情況下，輸入框不為空，顯示一個清空按鈕，點擊清空輸入框：

@override
List<Widget> buildActions(BuildContext context) {
  return [
    IconButton(
      icon: Icon(
        Icons.clear,
      ),
      onPressed: () {
        query = '';
      },
    )
  ];
}

buildResults是構建搜索結果控制項，當用戶點擊軟鍵盤上的“Search”時回調此方法，一般返回ListView，用法如下：

@override
Widget buildResults(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return Container(
        height: 60,
        alignment: Alignment.center,
        child: Text(
          '$index',
          style: TextStyle(fontSize: 20),
        ),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: 10,
  );
}

效果如下：

歡迎加入Flutter的微信交流群(laomengit)，一起學習，一起進步，生活不止眼前的苟且，還有詩和《遠方》。

當然我也非常希望您關註我個人的公眾號，裡面有各種福利等著大家哦。


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

-Advertisement-
Play Games
更多相關文章
  • Maven+Nexus環境實現Java打包環境部署
    （1）Maven項目介紹 詳細介紹請移步官網： http://maven.apache.org/what-is-maven.htm 我們需要知道Maven的主要介紹信息： 1.Maven是屬於apache軟體基金會下一個開源免費的項目，是跨平臺的項目管理工具. 2.Maven採用了一種被稱之為Pro ...
  • 學習docker and k8s 基礎（一） 安裝docker
    一、安裝、運行、配置docker 1、安裝docker yum install -y docker 2、查看docker是否安裝成功 yum list installed |grep docker 3、啟動docker服務(並設置開機自啟) systemctl start docker.servic ...
  • 如何簡單的將手機投屏在windows上（可在電腦上直接操作手機）
    首先附上要使用的 "scrcpy源地址" 接下來是如何使用（我用的是安卓手機+win10）： 1. 下載好後，首先使用數據線連接手機到電腦，並且手機需要打開 開發人員選項 （不知道如何打開的自行百度）； 2. 打開到安裝scrcpy的目錄，按住shift右鍵打開Powershell，輸入以下命令，設 ...
  • mysql varchar int 123 走索引嗎？
    結論： 當MySQL中欄位為int類型時，搜索條件where num='111' 與where num=111都可以使用該欄位的索引。當MySQL中欄位為varchar類型時，搜索條件where num='111' 可以使用索引，where num=111 不可以使用索引 驗證過程： 建表語句： 1 ...
  • Java中使用Jedis連接Redis對Set進行操作的常用命令
    場景 Centos中Redis的下載編譯與安裝(超詳細)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103967334 Redis的啟動和關閉(前臺啟動和後臺啟動)： https://blog.csdn.net/BADAO_ ...
  • Java中使用Jedis連接Redis對List進行操作的常用命令
    場景 Centos中Redis的下載編譯與安裝(超詳細)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103967334 Redis的啟動和關閉(前臺啟動和後臺啟動)： https://blog.csdn.net/BADAO_ ...
  • Oracle、OracleClient、PLSQL下載&安裝&配置(64位)
    下載 鏈接：https://pan.baidu.com/s/1DpBiI3ZBXVDnFxRxPxnpKg 提取碼：9mcv 一、Oracle11gR2(64位)安裝配置 1、下載後，同時選擇兩個壓縮文件進行解壓，得到安裝程式文件夾； 2、進入安裝文件夾，指定stepup.exe: （1）配置安全更 ...
  • Redis5新特性Streams作消息隊列
    前言 Redis 5 新特性中，Streams 數據結構的引入，可以說它是在本次迭代中最大特性。它使本次 5.x 版本迭代中，Redis 作為消息隊列使用時，得到更完善，更強大的原生支持，其中尤為明顯的是持久化消息隊列。同時，stream 借鑒了 kafka 的消費組模型概念和設計，使消費消息處理上 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類