flutter生成源代码_Flutter创建工程的主要代码详解
使用Android Studio創建的默認Flutter工程主要代碼在lib文件夾下的main.dart文件中,本文主要對該文件進行一個講解。
main.dart文件可以認為是Flutter工程的入口文件,文件頂部import 'package:flutter/material.dart';(即引入了一個dart文件,該文件包含runApp()方法、StatelessWidget無狀態控件--Application被認為是一個無狀態控件、StatefulWidget有狀態控件--Activity中如果有UI交互,則被認為是一個有狀態控件、Widget控件統稱、Scaffold你可以認為是一個頁面控件等等,提供了基礎的接口供開發者使用)
runApp()顧名思義是啟動Application程序的入口。
MyApp就是Application類,它集成自StatelessWidget,是一個無狀態控件。StatelessWidget類需要重寫build方法,返回類型是Widget。這里多說一句,Flutter中不論Application、Activity還是其他的控件,一律都是Widget的子類,Widget貫穿Flutter的始終。
重寫后返回一個MaterialApp,它就是一個代Material風格的App,Material是一種風格(該風格可以百度),title: 'Flutter Demo', 指定app的title是Flutter Demo,切到多任務后可以看到。
這里需要多說一句,Flutter指定參數時,是參數名:參數值的形式。按住ctrl查看,發現title是定義在app.dart中的參數。問:這樣指定參數有什么好處?答:指定多個參數時的順序可以很隨意。
然后是主題theme: ThemeData(
primarySwatch: Colors.blue,
),這里是創建了一個ThemeData的對象。你可能會問沒有new關鍵字啊?是的,Flutter中可以省掉new關鍵字。這里創建了一個ThemeData,查看源碼可以知道ThemeData定義在theme_data.dart文件中,通過ThemeData的屬性可以定義主題。這里指定主題色是藍色,狀態欄是藍色。、
然后是 home: MyHomePage(title: 'Flutter Demo Home Page'),參數home是一個Widget,定義在app.dart中,它是指定首頁面,可以理解為MainActivity。MyHomePage是自定義的類,它繼承自StatefulWidget,是一個有狀態的控件(點擊按鈕改變頁面文本內容)。
查看MyHomePage類,它的構造方法有一個Key和一個title( MyHomePage({Key key, this.title}) : super(key: key);
),(這里我有一個疑問,是它構造方法參數的寫法,有點不明白title為什么是這樣,如果看到的你知道原因,希望告訴我一下,謝謝了。)它顯示調用父類的構造方法super(key: key);(這里也不知道為什么是這樣的寫法,同問)。接著向下看,定義了一個title標題, final String title; 然后重寫了StatefulWidget類里的createState()方法,點進可以發現該方法返回一個State類型。這里Flutter的寫法@override
_MyHomePageState createState() => _MyHomePageState(); 是dart的箭頭方法。
MyHomePageState是自定義類,它的類聲明class MyHomePageState extends State {
可以看出是繼承自State,<>里的MyHomePage是作用在MyHomePage上,即MainActivity主頁面。看他人文章說,下劃線代表private私有的意思,那我這里也這么認為好了。里面有一個私有的count屬性 int _counter = 0; 有一個私有的計數+1方法void _incrementCounter() {
setState(() {
_counter++;
});
},這個setState()方法是framework.dart中的類State的方法,參數是一個方法,復制過來看下@protected
void setState(VoidCallback fn) {,是一個VoidCallback fn,理解為傳遞一個方法進來。執行的操作是counter++計數加一。重寫了State的build方法 Widget build(BuildContext context) {,返回一個Widget控件。@override
Widget build(BuildContext context) {
return Scaffold(,我查了一下Scaffold意思是腳手架,這里我傾向于認為組成MainActivity的布局。
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
我把注釋刪掉了,發現代碼行數還是很長,沒辦法,Flutter語法就是這樣,犧牲長度換來更好的可理解性。
里面定義了AppBar,指定了title。定義了body,指定了children數組,是兩個文本Text組件。 '$_counter',這樣可以取得計數的數值,是一種更簡單的寫法。還定義了一個按鈕,點擊時執行技術+1onPressed: _incrementCounter,
到這里,main.dart的主要代碼就講完了。我是跟著他人的講解,一點點敲得。敲的時候還是發現了很多的問題,自己也慢慢的理解和加深印象。大家如果要學的話,建議也是一點點敲出來,相信這樣也會理解很多東西。
總結
以上是生活随笔為你收集整理的flutter生成源代码_Flutter创建工程的主要代码详解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue复选框组件自定义对勾_vue+el
- 下一篇: rda冗余分析步骤_群落分析的典范对应分