文章目錄

• 一、StatefulWidget 組件
• 二、創建 StatefulWidget 組件
• 三、MaterialApp 組件
• 四、Scaffold 組件
• 五、 相關資源

一、StatefulWidget 組件

---

StatefulWidget 組件是 有狀態組件 , 有如下常用的基礎組件 :

• MaterialApp : 材料設計 APP 組件 , 通常用作頁面的根節點 ;
• Scaffold : Flutter 封裝的帶有 AppBar , 底部導航欄 BottomNavigationBar , 側邊欄 的組件 , 使用該組件可以很容易實現一個復雜的導航頁面 ;
• AppBar : 頂部導航欄 ;
• BottomNavigationBar : 底部導航欄 ;
• RefreshIndicator : 刷新指示器 ;
• Image : 圖片組件 ;
• TextField : 輸入框組件 ;
• PageView : 可滾動翻頁的組件 , 類似于 Android 的 ViewPager ;

二、創建 StatefulWidget 組件

---

創建空的 dart 文件 StatelessWidgetPage.dart , 導入最基礎的材料設計包 ,

import 'package:flutter/material.dart';

輸入 stf 即可提示出 stful 代碼模板 , 使用該代碼模板創建一個新的 StatelessWidget 組件 ,

生成的代碼模板如下 :

class extends StatefulWidget {@override_State createState() => _State(); }class _State extends State<> {@overrideWidget build(BuildContext context) {return Container();} }

在光標停留位置 , 輸入新的組件名稱 , StatefulWidgetPage 名稱 , 然后點擊回車 , 就可以生成一個新的 StatefulWidget 組件 ;

新生成的代碼如下 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {@overrideWidget build(BuildContext context) {return Container();} }

在上面的 Widget build(BuildContext context) 方法中 , 創建相關組件 ;

將上述 Widget build(BuildContext context) 方法 , 替換成上一篇博客 【Flutter】StatelessWidget 組件 ( Divider 組件 | Card 組件 | AlertDialog 組件 ) 的 build 方法 , 修改標題為 " " , 完整代碼如下 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {// 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 組件示例'),),// Container 容器使用body: Container(// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.grey),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[// Text 文本組件// textStyle 是之前創建的 TextStyle textStyle 對象Text('Container 中的 Text 文本組件示例', style: textStyle,),// Icon 圖標組件Icon(Icons.map, size: 100, color: Colors.green,),// 關閉按鈕CloseButton(),// 返回按鈕BackButton(),// Chip 組件Chip(// Chip 組件的圖標avatar: Icon(Icons.access_alarm, color: Colors.blue,),label: Text('鬧鐘', style: textStyle,),),// Divider 分割線組件Divider(// 設置分割線容器高度height: 20,// 分割線左側間距indent: 20,// 設置分割線顏色color: Colors.red,),// Card 組件 : 可設置圓角 , 陰影 , 邊框 等效果Card(// 設置卡片的背景顏色color: Colors.green,// 設置陰影elevation: 5,// 設置卡片的邊距margin: EdgeInsets.all(10),// 設置子組件child: Container(// 設置邊距 10padding: EdgeInsets.all(10),// 設置卡片文字 , 設置卡片文字樣式child: Text("卡片文字", style: textStyle,),),),// AlertDialog 對話框 , 該彈窗有一個自動圓角和陰影AlertDialog(// 對話框標題title: Text("AlertDialog 對話框標題"),// 對話框內容content: Text("AlertDialog 對話框內容"),),],),),),);} }

運行效果展示 :

三、MaterialApp 組件

---

MaterialApp 組件是 材料設計 ( Material Design ) APP 組件 , 通常用作頁面的根節點 ;

MaterialApp 組件是 StatefulWidget 的子類 ;

通過 MaterialApp 組件很容易實現符合 Material Design 規范的應用 ;

MaterialApp 組件中的 tittle 字段就是標題設置 , theme 字段設置的是主題 , home 字段設置的是界面的主要子組件 ; 在上述示例中

下面的代碼是 MaterialApp 構造函數源碼 , 其中構造函數的可選參數就是可設置的選項 :

class MaterialApp extends StatefulWidget {/// Creates a MaterialApp.////// At least one of [home], [routes], [onGenerateRoute], or [builder] must be/// non-null. If only [routes] is given, it must include an entry for the/// [Navigator.defaultRouteName] (`/`), since that is the route used when the/// application is launched with an intent that specifies an otherwise/// unsupported route.////// This class creates an instance of [WidgetsApp].////// The boolean arguments, [routes], and [navigatorObservers], must not be null.const MaterialApp({Key key,this.navigatorKey,this.home,// 主頁面組件 this.routes = const <String, WidgetBuilder>{},this.initialRoute,this.onGenerateRoute,this.onUnknownRoute,this.navigatorObservers = const <NavigatorObserver>[],this.builder,this.title = '',// 標題this.onGenerateTitle,this.color,this.theme,// 主題 this.darkTheme,this.themeMode = ThemeMode.system,this.locale,this.localizationsDelegates,this.localeListResolutionCallback,this.localeResolutionCallback,this.supportedLocales = const <Locale>[Locale('en', 'US')],this.debugShowMaterialGrid = false,this.showPerformanceOverlay = false,this.checkerboardRasterCacheImages = false,this.checkerboardOffscreenLayers = false,this.showSemanticsDebugger = false,this.debugShowCheckedModeBanner = true,}) : assert(routes != null),assert(navigatorObservers != null),assert(title != null),assert(debugShowMaterialGrid != null),assert(showPerformanceOverlay != null),assert(checkerboardRasterCacheImages != null),assert(checkerboardOffscreenLayers != null),assert(showSemanticsDebugger != null),assert(debugShowCheckedModeBanner != null),super(key: key); }

四、Scaffold 組件

---

Scaffold 組件是一個完整的頁面組件 , 封裝有 AppBar , 底部導航欄 BottomNavigationBar , 側邊欄組件 , 使用該組件可以很容易實現一個復雜的導航頁面 ;

Scaffold 組件常用設置選項 :

• 頂部標題欄設置 : appBar ;
• 界面主體子組件設置 : body ;
• 懸浮按鈕設置 : floatingActionButton ;
• 底部導航欄設置 : bottomNavigationBar ;
• 側邊欄設置 : drawer ;

Scaffold 組件構造函數源碼 : 構造函數中的可選參數就是組件的可設置選項 ;

class Scaffold extends StatefulWidget {/// Creates a visual scaffold for material design widgets.const Scaffold({Key key,this.appBar,// 頂部標題欄設置this.body,// 界面主體組件設置this.floatingActionButton,// 懸浮按鈕設置 this.floatingActionButtonLocation,this.floatingActionButtonAnimator,this.persistentFooterButtons,this.drawer,// 側邊欄this.endDrawer,this.bottomNavigationBar,// 底部導航欄this.bottomSheet,this.backgroundColor,this.resizeToAvoidBottomPadding,this.resizeToAvoidBottomInset,this.primary = true,this.drawerDragStartBehavior = DragStartBehavior.start,this.extendBody = false,this.extendBodyBehindAppBar = false,this.drawerScrimColor,this.drawerEdgeDragWidth,}) : assert(primary != null),assert(extendBody != null),assert(extendBodyBehindAppBar != null),assert(drawerDragStartBehavior != null),super(key: key); }

五、 相關資源

---

參考資料 :

• 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 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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