你知道嗎，Flutter內置了10多種Button控制項

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

註意：無特殊說明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter內置了10多種Button（按鈕）類控制項供我們使用，瞭解這些控制項有助於提高我們的開發速度。 RaisedButton RaisedButton是 ...


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

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

Flutter內置了10多種Button（按鈕）類控制項供我們使用，瞭解這些控制項有助於提高我們的開發速度。

RaisedButton

RaisedButton是一個material風格”凸起“的按鈕，基本用法：

RaisedButton(
  child: Text('Button'),
  onPressed: (){
  },
)

效果：

onPressed為null或不設置時，按鈕是禁用狀態。

onHighlightChanged為高亮變化回調，按下時處於高亮狀態，抬起處於不高亮狀態，用法如下：

RaisedButton(
  onHighlightChanged: (high){
  },
  ...
)

按鈕可以設置字體及各種狀態顏色，總結如下：

屬性 說明
textColor 字體顏色
disabledTextColor 禁用狀態下字體顏色
color 背景顏色
disabledColor 禁用狀態下背景顏色
highlightColor 高亮顏色，按下時的顏色
splashColor 水波紋顏色，按下鬆開會有水波紋效果

以textColor為例，用法如下：

RaisedButton(
  textColor: Colors.red,
  ...
)

也可以通過textTheme設置字體樣式，用法如下：

RaisedButton(
  textTheme: ButtonTextTheme.primary,
  ...
)

ButtonTextTheme的值介紹如下：

  • normal：黑色或者白色字體，依賴於ThemeData.brightness
  • accent：字體顏色依賴於ThemeData.accentColor
  • primary ：字體顏色依賴於ThemeData.primaryColor

這3個值在MaterialApp控制項中進行全局設置，設置如下：

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primaryColor: Color(0xFF42A5F5),
    accentColor: Colors.yellow,
    brightness: Brightness.light
  ),
  ...
)

設置按鈕陰影、高亮陰影、禁用陰影，用法如下：

RaisedButton(
  elevation: 5.0,
  highlightElevation: 5.0,
  disabledElevation: 5.0,
  ...
)

shape設置按鈕的形狀，比如設置為圓形，代碼如下：

RaisedButton(
  shape: CircleBorder(),
  ...
)

效果如下：

和hover相關的屬性是指滑鼠懸停時的狀態，移動端沒有效果，focus相關的屬性為獲取焦點時的狀態。

FlatButton

FlatButton是一個扁平的按鈕，用法和RaisedButton一樣，代碼如下：

FlatButton(
  child: Text('Button'),
  color: Colors.blue,
  onPressed: () {},
)

效果如下：

OutlineButton

OutlineButton 是一個帶邊框的按鈕，用法和RaisedButton一樣，代碼如下：

OutlineButton(
  child: Text('Button'),
  onPressed: () {},
)

效果如下：

設置其邊框樣式，代碼如下：

OutlineButton(
  borderSide: BorderSide(color: Colors.blue,width: 2),
  disabledBorderColor: Colors.black,
  highlightedBorderColor: Colors.red,
  child: Text('Button'),
  onPressed: () {},
)

效果如下：

DropdownButton為下拉選擇按鈕，基本用法如下：

var _dropValue = '語文';

_buildButton() {
  return DropdownButton(
    value: _dropValue,
    items: [
      DropdownMenuItem(child: Text('語文'),value: '語文',),
      DropdownMenuItem(child: Text('數學'),value: '數學'),
      DropdownMenuItem(child: Text('英語'),value: '英語'),
    ],
    onChanged: (value){
      setState(() {
        _dropValue = value;
      });
    },
  );
}

items是點擊時彈出選項，onChanged選項發生變化時回調。效果如下：

如果你對選中的選項的樣式不滿意，可以自定義，用法如下：

DropdownButton(
  selectedItemBuilder: (context){
    return [
      Text('語文',style: TextStyle(color: Colors.red),),
      Text('數學',style: TextStyle(color: Colors.red),),
      Text('英語',style: TextStyle(color: Colors.red),)
    ];
  },
  ...
)

selectedItemBuilder返回的組件要和items中一一對應，選中樣式如下：

當用戶未選中時，即value 為null，顯示''請選中"，用法如下：

DropdownButton(
  hint: Text('請選擇'),
  value: null,
  ...
)

效果如下：

預設情況下，下拉選項的圖標是倒立的三角，也可以進行自定義，用法如下：

DropdownButton(
  icon: Icon(Icons.add),
  iconSize: 24,
  iconDisabledColor: Colors.red,
  iconEnabledColor: Colors.red,
  ...
)

效果如下：

RawMaterialButton

RawMaterialButton是基於Semantics, Material和InkWell創建的組件，它不使用當前的系統主題和按鈕主題，用於自定義按鈕或者合併現有的樣式，而RaisedButton和FlatButton都是基於RawMaterialButton配置了系統主題和按鈕主題，相關屬性可以參考RaisedButton，參數基本一樣，基本用法如下：

RawMaterialButton(
  onPressed: (){},
  fillColor: Colors.blue,
  child: Text('Button'),
)

效果如下：

PopupMenuButton

PopupMenuButton是一個菜單選中控制項，用法如下：

PopupMenuButton<String>(
  itemBuilder: (context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: '語文',
        child: Text('語文'),
      ),
      PopupMenuItem<String>(
        value: '數學',
        child: Text('數學'),
      ),
      PopupMenuItem<String>(
        value: '英語',
        child: Text('英語'),
      ),
      PopupMenuItem<String>(
        value: '生物',
        child: Text('生物'),
      ),
      PopupMenuItem<String>(
        value: '化學',
        child: Text('化學'),
      ),
    ];
  },
)

效果如下：

設置其初始值：

PopupMenuButton<String>(
  initialValue: '語文',
  ...
)

設置初始值後，打開菜單後，設置的值將會高亮，效果如下：

獲取用戶選擇了某一項的值，或者用戶未選中，代碼如下：

PopupMenuButton<String>(
  onSelected: (value){
    print('$value');
  },
  onCanceled: (){
    print('onCanceled');
  },
  ...
)

tooltip是長按時彈出的提示，用法如下：

PopupMenuButton<String>(
  tooltip: 'PopupMenuButton',
  ...
)

效果如下：

設置其陰影值、內邊距和彈出菜單的背景顏色：

PopupMenuButton<String>(
  elevation: 5,
  padding: EdgeInsets.all(5),
  color: Colors.red,
  ...
)

預設情況下，PopupMenuButton顯示3個小圓點，我們也可以對齊進行設置，設置文字如下：

PopupMenuButton<String>(
  child: Text('學科'),
  ...
)

child組件將會被InkWell包裹，點擊彈出菜單，效果如下：

也可以設置其他圖標：

PopupMenuButton<String>(
    icon: Icon(Icons.add),
    ...
)

效果如下：

設置彈出菜單邊框：

PopupMenuButton<String>(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.red
    ),
    borderRadius: BorderRadius.circular(10)
  ),
    ...
)

效果如下：

IconButton

IconButton是一個圖標按鈕，用法如下：

IconButton(
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)

設置提示屬性：

IconButton(
  tooltip: '這是一個圖標按鈕',
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)

當長按時顯示提示，效果如下：

BackButton

BackButton是一個material風格的返回按鈕，本身是一個IconButton，點擊時預設執行Navigator.maybePop即如果路由棧有上一頁則返回到上一頁。

BackButton()

Android和IOS平臺顯示的圖標是不一樣的，ios效果如下：

Android效果如下：

CloseButton

CloseButton是一個material風格的關閉按鈕，本身是一個IconButton，點擊時預設執行Navigator.maybePop即如果路由棧有上一頁則返回到上一頁。

和BackButton適用場景不同，BackButton適用於全屏的頁面，而CloseButton適用於彈出的Dialog。

用法如下：

CloseButton()

效果如下：

ButtonBar

ButtonBar並不是一個單獨的按鈕控制項，而是末端對齊的容器類控制項，當在水平方向上沒有足夠空間時候，按鈕將整體垂直排列，而不是換行。基本用法如下：

ButtonBar(
  children: <Widget>[
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
  ],
)

效果如下：

設置主軸的對齊方式及主軸的尺寸：

ButtonBar(
  alignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  ...
)

效果如下：

ToggleButtons

ToggleButtons組件將多個組件組合在一起，並讓用戶從中選擇，ToggleButtons基礎用法如下：

List<bool> _selecteds = [false, false, true];
ToggleButtons(
      isSelected: _selecteds,
      children: <Widget>[
        Icon(Icons.local_cafe),
        Icon(Icons.fastfood),
        Icon(Icons.cake),
      ],
      onPressed: (index) {
        setState(() {
          _selecteds[index] = !_selecteds[index];
        });
      },
    );

isSelected 屬性是bool類型集合，數量和children的數量一致，onPressed是點擊回調，這時就有了不錯了切換按鈕行，效果如下：

我們還可以自定義外觀，比如設置按鈕的顏色：

ToggleButtons(
      color: Colors.green,
      selectedColor: Colors.orange,
        fillColor: Colors.red,
      ...
)

效果如下：

fillColor是選中按鈕的背景顏色。

如果不需要邊框，可以將renderBorder設置為false：

ToggleButtons(
    renderBorder: false,
)

效果如下：

當然我們也可以設置邊框的圓角半徑、寬度、顏色等：

ToggleButtons(
      borderRadius: BorderRadius.circular(30),
      borderColor: Colors.orange,
      borderWidth: 3,
      selectedBorderColor: Colors.deepOrange,
）

效果如下：

甚至可以設置點擊水波紋顏色（splashColor）和按下時的高亮顏色（highlightColor）：

ToggleButtons(
      splashColor: Colors.purple,
      highlightColor: Colors.yellow,
      ）

效果如下：

如果按鈕處於禁用狀態，可以設置禁用狀態下按鈕及邊框的顏色：

ToggleButtons(
      onPressed: null,
      disabledColor: Colors.grey[300],
      disabledBorderColor: Colors.blueGrey,
      )

效果如下：

如果開發的是web程式，我們可以設置滑鼠懸停顏色：

ToggleButtons(
      hoverColor: Colors.cyan,
      )

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

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


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

-Advertisement-
Play Games
更多相關文章
  • 數據挖掘篇——特征工程之特征降維
    在業界廣泛流傳著一句話：數據和特征決定了機器學習的上限，而模型和演算法只是逼近這個上限而已。 由此可見，數據和特征是多麼的重要，而在數據大多數場景下，數據已經就緒，不同人對於同樣的數據處理得到的特征卻千差萬別，最終得到的建模效果也是高低立現。從數據到特征這就要從特征工程說起了... ...
  • mysql 按分數段，每個專業分數段統計人數
    我的表結構 student_info | id |name |profession|score| | | | | | |id|姓名|分數|專業| 按分數段統計 400到500人數，300到400人數 按分數段和專業統計 400到500人數，300到400人數 sql動態拼接生成 輸出sql ...
  • SQL JOIN用法示例
    現在有兩張表，第一張表有學生姓名，語文，數學，英語成績，數據量46萬。第二張表有學生姓名，物理，化學，政治成績，數據量10萬。 1. 找出既參加了table1，也參加了table2的考試的學生的數學和物理成績： SELECT achievement_1.name, achievement_1.mat ...
  • [學習筆記] Oracle字元串函數、日期函數、數值函數、轉換函數、聚合函數
    函數 單行函數：對一行數據進行操作的函數，如字元串函數、數值函數、轉換函數、日期函數等。 聚合函數：同時對多行數據進行操作，如求和函數等。 字元串函數 | 函數 | 說明 | | | | | ASCII(X) | 求字元X的ASCII碼 | | CHR(X) | 求ASCII碼對應的字元 | | L ...
  • [學習筆記] Oracle集合運算、內連接、外連接、偽列
    集合運算 INTERSECT(交集)，返回兩個查詢共有的記錄。 UNION ALL(並集重覆)，返回各個查詢的所有記錄，包括重覆記錄。 UNION(並集不重覆)，返回各個查詢的所有記錄，不包括重覆記錄 。 MINUS(補集)，返回第一個查詢的記錄減去第二個查詢的記錄之後剩餘的記錄。 內連接 兩張表通 ...
  • MySQL字元集不一致導致性能下降25%，你敢信？
    故事是這樣的： 我在對MySQL進行性能測試時，發現CPU使用率接近100%，其中80%us, 16%sys,3%wa，iostat發現磁碟iops2000以下，avgqu-sz不超過3，%util最高70%，看來瓶頸不在磁碟IO上面，而在CPU上。sys部分使用率有點高。 於是我果斷使用perf  ...
  • PLSQL操作Oracle創建用戶和表
    1、打開PLSQL，填寫用戶名和密碼（初始有兩個用戶sys和system，密碼是自己安裝oracle資料庫時定的），Database選擇ORCL（預設資料庫，oracle中創建的用戶就像是mysql中建的資料庫，兩者有異曲同工之妙） 2、登陸成功後在界面的頭部可以看到一下信息，最上面的system@ ...
  • [學習筆記] Oracle運算符、連接符、結果去重、範圍查詢、模糊查詢
    運算符 | 符號 | 解釋 | | | | | + | 加法 | | | 減法 | | | 乘法 | | / | 除法，結果是浮點數 | | = | 等於 | | | 大於 | | 或者!= | 不等於 | | = | 大於或者等於 | | DISTINCT後面只有一個列時，表示的是單個欄位查詢結果 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類