1.Flutter 第一個 Demo Center 組件的使用
在 Flutter 中自定義組件其實就是一個類付翁,這個類需要繼承StatelessWidget/StatefulWidget简肴。
前期我們都繼承 StatelessWidget。后期給大家講 StatefulWidget 的使用百侧。 StatelessWidget 是無狀態(tài)組件砰识,狀態(tài)不可變的 widget StatefulWidget 是有狀態(tài)組件,持有的狀態(tài)可能在 widget 生命周期改變佣渴。
import 'package:flutter/material.dart'
void main() => runApp(myApp());
class myApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return Center{
child: Text{
"我是一個文本內(nèi)容"辫狼,
textDirection: TextDirection.ltr,
}
},
};
}
2.給Text組件增加一些裝飾
import 'package:flutter/material.dart';
void main(){ runApp(MyApp()); }
class MyApp exstands StatelessWidget{
@override
Wigdet bluid(BluidContext context){
return Center{
child: Text{
"我是 Dart 一個文本內(nèi)容",
textDirection: TextDirection.ltr,
style: TextStyle{
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(255, 222, 222, 0.5)
}
},
};
}
}
3.使用MaterialApp和Scaffold兩個組件裝飾App
1.MaterialApp
MaterialApp是一個方便的Widget,它封裝了應(yīng)用程序?qū)崿F(xiàn)Material Design所需要的一些Widget辛润。一般作為頂層widget使用膨处。
常用的屬性:
- home(主頁)
- title(標(biāo)題)
- color(顏色)
- theme(主題)
- routes(路由)
- ...
2.Scaffold
Scaffold是Material Design布局結(jié)構(gòu)的基本實現(xiàn)。此類提供了用于顯示drawer频蛔、snackbar和底部sheet的API灵迫。
常用的屬性:
- appBar - 顯示在界面頂部的一個 AppBar
- body - 當(dāng)前界面所顯示的主要內(nèi)容 Widget
- drawer - 抽屜菜單控件
- ...
import 'package:flutter/material.dart';
void main(){ runApp(MyApp()); }
class MyApp extends s StatelessWidget{
@override
Widget build(BuildContext context) {
return MateriaApp{
title: "我是一個標(biāo)題",
home: Scaffold{
appBar: AppBar{
title: Text('appBar title'),
elevation: 30.0, //設(shè)置標(biāo)題陰影
},
body: MyHome(),
},
theme: ThemeData{
//設(shè)置主題顏色
primarySwatch: Colors.yellow,
},
};
}
}
class MyHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center{
child: Text{
"我是 Dart 一個文本內(nèi)容",
textDirection: TextDirection.ltr,
style: TextStyle{
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black38,
}
},
};
}
}