文章目錄

• 一、FloatingActionButton 懸浮按鈕組件
• 二、RefreshIndicator 組件
• 三、 相關資源

一、FloatingActionButton 懸浮按鈕組件

---

FloatingActionButton 組件是懸浮按鈕組件 ;

FloatingActionButton 組件常用設置 :

• 點擊事件 : onPressed ;
• 顯示組件 : child ;

FloatingActionButton 構造函數源碼 : 在構造函數的可選參數中 , 可以查詢該組件可設置的參數選項 ;

class FloatingActionButton extends StatelessWidget {/// Creates a circular floating action button.////// The [mini] and [clipBehavior] arguments must not be null. Additionally,/// [elevation], [highlightElevation], and [disabledElevation] (if specified)/// must be non-negative.const FloatingActionButton({Key key,this.child,// 顯示組件 this.tooltip,this.foregroundColor,this.backgroundColor,this.focusColor,this.hoverColor,this.splashColor,this.heroTag = const _DefaultHeroTag(),this.elevation,this.focusElevation,this.hoverElevation,this.highlightElevation,this.disabledElevation,@required this.onPressed, // 點擊事件this.mini = false,this.shape,this.clipBehavior = Clip.none,this.focusNode,this.autofocus = false,this.materialTapTargetSize,this.isExtended = false,}) : assert(elevation == null || elevation >= 0.0),assert(focusElevation == null || focusElevation >= 0.0),assert(hoverElevation == null || hoverElevation >= 0.0),assert(highlightElevation == null || highlightElevation >= 0.0),assert(disabledElevation == null || disabledElevation >= 0.0),assert(mini != null),assert(clipBehavior != null),assert(isExtended != null),assert(autofocus != null),_sizeConstraints = mini ? _kMiniSizeConstraints : _kSizeConstraints,super(key: key); }

將 FloatingActionButton 懸浮按鈕組件設置給 Scaffold 組件的 floatingActionButton 字段 ;

onPressed 字段設置點擊事件 , child 設置顯示組件 ;

Scaffold(// 設置懸浮按鈕floatingActionButton: FloatingActionButton(onPressed: (){print("懸浮按鈕點擊");},child: Text("懸浮按鈕組件"),), )

完整代碼示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},// 條目items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// 設置懸浮按鈕floatingActionButton: FloatingActionButton(onPressed: (){print("懸浮按鈕點擊");},child: Text("懸浮按鈕組件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?Container( // 對應底部導航欄主界面選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡")],),):Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("設置頁面選項卡")],),) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符),);} }

運行效果 :

打印結果 : 點擊懸浮按鈕后打印如下內容 ;

I/flutter (23329): 懸浮按鈕點擊

二、RefreshIndicator 組件

---

RefreshIndicator 組件常用于下拉刷新操作 ;

RefreshIndicator 組件構造函數 : 構造函數的可選參數中展示了其可以設置的參數 ;

class RefreshIndicator extends StatefulWidget {/// Creates a refresh indicator.////// The [onRefresh], [child], and [notificationPredicate] arguments must be/// non-null. The default/// [displacement] is 40.0 logical pixels.////// The [semanticsLabel] is used to specify an accessibility label for this widget./// If it is null, it will be defaulted to [MaterialLocalizations.refreshIndicatorSemanticLabel]./// An empty string may be passed to avoid having anything read by screen reading software./// The [semanticsValue] may be used to specify progress on the widget.const RefreshIndicator({Key key,@required this.child, // 顯示的主內容 , 一般是列表this.displacement = 40.0,@required this.onRefresh, // 刷新回調事件this.color,this.backgroundColor,this.notificationPredicate = defaultScrollNotificationPredicate,this.semanticsLabel,this.semanticsValue,}) : assert(child != null),assert(onRefresh != null),assert(notificationPredicate != null),super(key: key); }

其 onFresh 字段的類型是 RefreshCallback 類型的 ,

/// A function that's called when the user has dragged the refresh indicator/// far enough to demonstrate that they want the app to refresh. The returned/// [Future] must complete when the refresh operation is finished.final RefreshCallback onRefresh;

RefreshCallback 類型就是 Future Function() 類型 ;

/// The signature for a function that's called when the user has dragged a /// [RefreshIndicator] far enough to demonstrate that they want the app to /// refresh. The returned [Future] must complete when the refresh operation is /// finished. /// /// Used by [RefreshIndicator.onRefresh]. typedef RefreshCallback = Future<void> Function();

這里定義一個 RefreshCallback 類型方法 , 該方法是一個異步方法 , 當 RefreshIndicator 發生下拉操作時, 回調該方法 ;

異步方法 , 在方法體前添加 async 關鍵字 ;

該方法的主要作用是暫停 500 ms , 然后返回空 ;

/// RefreshIndicator 發生下拉操作時, 回調該方法/// 該方啊是一個異步方法 , 在方法體前添加 async 關鍵字Future<Null> _refreshIndicatorOnRefresh() async{// 暫停 500 ms , 使用 await 關鍵字實現// 在這 500 ms 之間 , 列表處于刷新狀態// 500 ms 之后 , 列表變為非刷新狀態await Future.delayed(Duration(milliseconds: 500));return null;}

刷新指示器代碼示例 : 首先設置其顯示內容 , 在 child 字段設置 , 這里設置了一個 ListView 列表組件 , 然后設置了下拉刷新回調方法 , 在 onRefresh 字段設置 ;

// 刷新指示器組件RefreshIndicator(// 顯示的內容child: ListView(children: <Widget>[Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡, 下拉刷新")],),),],),// 刷新時回調的方法// 列表發生下拉操作時, 回調該方法// 該回調是 Future 類型的onRefresh: _refreshIndicatorOnRefresh,)

完整代碼示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},// 條目items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// 設置懸浮按鈕floatingActionButton: FloatingActionButton(onPressed: (){print("懸浮按鈕點擊");},child: Text("懸浮按鈕組件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器組件RefreshIndicator(// 顯示的內容child: ListView(children: <Widget>[Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡, 下拉刷新")],),),],),// 刷新時回調的方法// 列表發生下拉操作時, 回調該方法// 該回調是 Future 類型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("設置頁面選項卡")],),) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符),);}/// RefreshIndicator 發生下拉操作時, 回調該方法/// 該方啊是一個異步方法 , 在方法體前添加 async 關鍵字Future<Null> _refreshIndicatorOnRefresh() async{// 暫停 500 ms , 使用 await 關鍵字實現// 在這 500 ms 之間 , 列表處于刷新狀態// 500 ms 之后 , 列表變為非刷新狀態await Future.delayed(Duration(milliseconds: 500));return null;}}

運行效果展示 :

三、 相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。