文章目錄

• 一、Flutter 組件簡介
• 二、Flutter 自定義 StatelessWidget 組件流程
• • 1、導入父類包
  • 2、選擇繼承的父類
  • 3、設置成員變量及構造函數(shù)
  • 4、重寫 build 方法
  • 5、完整代碼示例
• 三、Flutter 自定義 StatefulWidget 組件流程
• 四、使用 final 修飾 Widget 組件成員變量分析
• 五、調用自定義組件
• • 1、主要方法
  • 2、完整代碼
  • 3、效果展示
• 六、博客資源

一、Flutter 組件簡介

---

Flutter 開發(fā)中 , 組件可以是一個 Button 按鈕 , Text 文本 , 也可以是封裝好的一大塊區(qū)域 ; 組件由 Widget 組成 ;

二、Flutter 自定義 StatelessWidget 組件流程

---

1、導入父類包

自定義組件需要繼承 StatefulWidget 或 StatelessWidget , 這兩個父類組件都在 material.dart 中 , 因此這里先把依賴導入 ;

import 'package:flutter/material.dart';

2、選擇繼承的父類

自定義組件繼承 StatefulWidget 還是 StatelessWidget , 繼承哪個組件 , 由組件的性質決定 ;

• 如果 組件 只是純展示 , 沒有交互操作 , 那么繼承 StatelessWidget ;
• 如果 組件 需要根據(jù)交互內容 , 動態(tài)修改內容 , 那么繼承 StatefulWidget ;

3、設置成員變量及構造函數(shù)

聲明組件的成員變量 , 注意成員變量使用 final 修飾 ;

/// 組件屬性必須使用 final 修飾/// 所有的 Widget 組件都是不可變的final String name;final int? age;/// Dart 構造函數(shù)中 , {} 內的是可選參數(shù) , 可選參數(shù)必須在參數(shù)的最后/// 這里注意 , 可選參數(shù)如果定義為非空類型 , 那么必須有一個默認值/// 可選參數(shù)如果定義為可空類型 , 可以不用進行初始化const StudentStatelessWidget({this.name = "Tom", this.age});

4、重寫 build 方法

StatelessWidget 中的 build 方法是抽象方法 , 必須實現(xiàn) Widget build(BuildContext context) 方法 ;

abstract class StatelessWidget extends Widget {const StatelessWidget({ Key? key }) : super(key: key);@overrideStatelessElement createElement() => StatelessElement(this);@protectedWidget build(BuildContext context); }

繼承 StatefulWidget 或 StatelessWidget 后 , 需要重寫其 build 構造方法 ,

在該構造方法中 , 自定義組件行為 , 在這里拼裝組件即可 ;

@overrideWidget build(BuildContext context) {return Text("$name : $age");}

5、完整代碼示例

import 'package:flutter/material.dart';/// 自定義組件繼承 StatefulWidget 還是 StatelessWidget /// 由組件的性質決定 /// 如果 組件 只是純展示 , 沒有交互操作 , 那么繼承 StatelessWidget /// 如果 組件 需要根據(jù)交互內容 , 動態(tài)修改內容 , 那么繼承 StatefulWidget /// StatelessWidget 和 StatefulWidget 都需要導入如下包 /// import 'package:flutter/material.dart'; class StudentStatelessWidget extends StatelessWidget{/// 組件屬性必須使用 final 修飾/// 所有的 Widget 組件都是不可變的final String name;final int? age;/// Dart 構造函數(shù)中 , {} 內的是可選參數(shù) , 可選參數(shù)必須在參數(shù)的最后/// 這里注意 , 可選參數(shù)如果定義為非空類型 , 那么必須有一個默認值/// 可選參數(shù)如果定義為可空類型 , 可以不用進行初始化const StudentStatelessWidget({this.name = "Tom", this.age});@overrideWidget build(BuildContext context) {return Text("$name : $age");} }

三、Flutter 自定義 StatefulWidget 組件流程

---

自定義 StatefulWidget 組件 , 導入的包 定義 final 成員變量 與 StatelessWidget 組件相同 ;

StatefulWidget 中 State createState() 方法是抽象的 ;

因此 , StatefulWidget 組件不再實現(xiàn) Widget build(BuildContext context) 方法 , 而是實現(xiàn) State createState() 方法 ;

abstract class StatefulWidget extends Widget {const StatefulWidget({ Key? key }) : super(key: key);@overrideStatefulElement createElement() => StatefulElement(this);@protected@factoryState createState(); // ignore: no_logic_in_create_state, this is the original sin }

State<StatefulWidget> createState() 方法返回值類型 State 需要設置一個泛型 , 說明該 State 是用于哪個 StatefulWidget 組件的 ; 該泛型必須是 StatefulWidget 的子類 ;

@optionalTypeArgs abstract class State<T extends StatefulWidget> with Diagnosticable {@protectedWidget build(BuildContext context); }

自定義 State 類必須實現(xiàn) Widget build(BuildContext context) 抽象方法 ;

實現(xiàn)的 StatefulWidget 的 createState 方法返回值 , 一般需要自定義 State<StatefulWidget> 實現(xiàn)類 ;

State<StatefulWidget> createState()

在該 State<StatefulWidget> 實現(xiàn)類中 , 實現(xiàn) build 方法 , 返回要顯示的組件 ;

/// 該類用于管理組件中的狀態(tài) /// 需要繼承 createState 方法返回值類型 State<StatefulWidget> /// 在該類中 , 調用 setState 方法 , 可以更新組件 class _StudentStatefulWidgetState extends State<StatefulWidget> {/// 成員變量String name;int age;/// 構造函數(shù)_StudentStatefulWidgetState(this.name, this.age);@overrideWidget build(BuildContext context) {return Text("$name : $age");} }

完整代碼示例 :

import 'package:flutter/material.dart';/// 自定義組件繼承 StatefulWidget 還是 StatelessWidget /// 由組件的性質決定 /// 如果 組件 只是純展示 , 沒有交互操作 , 那么繼承 StatelessWidget /// 如果 組件 需要根據(jù)交互內容 , 動態(tài)修改內容 , 那么繼承 StatefulWidget /// StatelessWidget 和 StatefulWidget 都需要導入如下包 /// import 'package:flutter/material.dart'; class StudentStatefulWidget extends StatefulWidget{/// 組件屬性必須使用 final 修飾/// 所有的 Widget 組件都是不可變的final String name;final int? age;/// Dart 構造函數(shù)中 , {} 內的是可選參數(shù) , 可選參數(shù)必須在參數(shù)的最后/// 這里注意 , 可選參數(shù)如果定義為非空類型 , 那么必須有一個默認值/// 可選參數(shù)如果定義為可空類型 , 可以不用進行初始化const StudentStatefulWidget({this.name = "Tom", this.age});@overrideState<StatefulWidget> createState() => _StudentStatefulWidgetState(name, age!); }/// 該類用于管理組件中的狀態(tài) /// 需要繼承 createState 方法返回值類型 State<StatefulWidget> /// 在該類中 , 調用 setState 方法 , 可以更新組件 class _StudentStatefulWidgetState extends State<StatefulWidget> {/// 成員變量String name;int age;/// 構造函數(shù)_StudentStatefulWidgetState(this.name, this.age);@overrideWidget build(BuildContext context) {return Text("$name : $age");} }

四、使用 final 修飾 Widget 組件成員變量分析

---

組件屬性必須使用 final 修飾 , 如果不使用 final 修飾組件屬性 , 會有如下報錯 ;

Can't define a const constructor for a class with non-final fields. (Documentation) Try making all of the fields final, or removing the keyword 'const' from the constructor.

我們自定義的 StudentWidget 繼承了 StatelessWidget 類 , StatelessWidget 繼承了 Widget ;

abstract class StatelessWidget extends Widget { }

Widget 類由 @immutable 注解修飾 , 被該注解修飾的類 , 該類以及其子類中 的 成員變量都是不可變的 , 即都要被 final 類型修飾 ;

@immutable abstract class Widget extends DiagnosticableTree { }

五、調用自定義組件

---

1、主要方法

在 main.dart 中 , 使用如下代碼 , 創(chuàng)建組件 ;

StudentStatelessWidget(name: "Tom",age: 18 ), StudentStatefulWidget(name: "Jerry",age: 16 ),

2、完整代碼

完整代碼 :

import 'package:flutter/material.dart'; import 'package:flutter_widget/widget/student_stateful_widget.dart'; import 'package:flutter_widget/widget/student_stateless_widget.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[StudentStatelessWidget(name: "Tom",age: 18),StudentStatefulWidget(name: "Jerry",age: 16),Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headline4,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }

3、效果展示

效果展示 : 紅色矩形框中是顯示的兩個組件 ;

六、博客資源

---

GitHub : https://github.com/han1202012/flutter_widget

總結

以上是生活随笔為你收集整理的【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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