在Flutter里面一切皆組件，不同于CSS的樣式，在Flutter里面，樣式的值也基本都是組件，
以下是一個最簡單的Flutter專案代碼：
import 'package:flutter/material.dart';
void main(){
runApp(Center(
child: Text(
"你好，Flutter",
textDirection: TextDirection.ltr,
),
));
}實際的專案中一般比較大，為了代碼的可維護性，我們會把 runApp() 里的內容單獨抽離成一個自定義的組件，
在 Flutter 中自定義組件其實就是一個類，這個類需要繼承 StatelessWidget/StatefulWidget，
StatelessWidget 是無狀態組件，狀態不可變的 widget，
StatefulWidget 是有狀態組件，持有的狀態可能在 widget 生命周期改變，
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 將runApp()里抽離成一個組件
class MyApp extends StatelessWidget{
// 覆寫
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"你好，Flutter",
// 文字方向從左向右
textDirection: TextDirection.ltr,
),
);
}
}使用 MaterialApp 和 Scaffold 這兩個組件，會看起來更像一個APP，
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 將runApp()里抽離成一個組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar:AppBar(title:Text('Flutter App')),
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 將Scaffold里面的body也抽離成一個組件
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Text(
'你好，Flutter',
textDirection:TextDirection.ltr,
style:TextStyle(
// 字體大小都是double型別，必須有小數
fontSize: 40.0,
// color:Colors.yellow
color:Color.fromRGBO(100, 255, 100, 0.5)
),
)
);
}
} MaterialApp 是一個方便的 Widget，它封裝了應用程式實作 Material Design 所需要的 一些 Widget，一般作為頂層 widget 使用，該組件常用的屬性如下：
1. home 主頁
2. title 標題
3. color 顏色
4. theme 主題
5. routes 路由
Scaffold 是 Material Design 布局結構的基本實作，它提供了用于顯示 drawer、 snackbar 和底部 sheet 的 API，該組件主要的屬性如下：
1. appBar 顯示在界面頂部的一個 AppBar，
2. body 當前界面所顯示的主要內容 Widget，
3. drawer 抽屜選單控制元件，
以下是在上面代碼在模擬器上跑起來的效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/234947.html
標籤：區塊鏈
上一篇：《金融學》筆記 第二章 貨幣制度