原創 木子召 新新猿類 前天
首先我們來了解下什麼Widget，其實就是相當於iOS開發中的UIView,在dart中Widget分為兩大類
StatefulWidget (有狀態Widget）
狀態是在構建widget時可以同步讀取的信息，或者在widget的生命週期中可能更改的信息，在Flutter中如果要管理狀態需要用到 StatefulWidget。
StatelessWidget（無狀態Widget）
Flutter中的StatelessWidget是一個不需要狀態更改的widget - 它沒有要管理的內部狀態。
以上我們先簡單介紹下Widget,後面我們用到再詳細講，下面我們來看看如何定義一個Widget，我們還是用上次的demo的裡的代碼，把Text Widget抽取出來定義成MyWidget
class MyWidget extends StatelessWidget {
}
那如何把我們的Widget渲染到頁面上呢，其實有個build方法，build方法return什麼就會渲染什麼，我們來寫下build方法
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text('Hello Flutter', textDirection: TextDirection.ltr,)
);
}
}
然後我們把main函數里改下
void main(){
runApp(
MyWidget()
);
}
運行下跟我們之前的效果是一樣的
最後我們說下dart的一個語法，當一個函數只有一行代碼執行的時候，可以去掉大括號然後改成箭頭,最後我們精簡完就是下面這個樣子
void main() => runApp(MyWidget());
文字樣式
接下來我們來研究先Text這個Widget，我們點擊去Text類裡查看下
const Text(
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
})
const Text()是個構造函數，裡面的this.XXXX都是屬性而且是可選的，我們看見它有個style屬性，我們來設置下看看
import 'package:flutter/material.dart';
void main() => runApp(MyWidget());
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'Hello Flutter',
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.red, fontSize: 40, fontWeight: FontWeight.bold),
));
}
}
我們保存下代碼直接熱重裝看看效果
我們把代碼整理下,style抽出來
import 'package:flutter/material.dart';
void main() => runApp(MyWidget());
class MyWidget extends StatelessWidget {
@override
final _textStyle = TextStyle(
color: Colors.red,
fontSize: 40,
fontWeight: FontWeight.bold
);
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'Hello Flutter',
textDirection: TextDirection.ltr,
style: _textStyle,
));
}
}
是不是發現我們的_textStyle很像CSS啊，還有就是大家有沒有覺得有了hot reload之後寫UI爽歪歪啊
明天我們來說說MaterialApp和ListView這兩個組件
點此查看福利
One More Thing
掃碼查看 2020—課程列表 全網IT各種資源有需求的可以微我，或者你喜歡的課程都可以給我發鏈接剩下的我來搞定
喜歡的朋友可以掃描關注我的公眾號(多多點贊，多多打賞，您的支持是我寫作的最大動力）關注有福利可以使用免費梯子自由上網
iOS_DevTips
掃碼查看 2020—課程列表 全網IT各種資源有需求的可以微我，或者你喜歡的課程都可以給我發鏈接剩下的我來搞定
喜歡的朋友可以掃描關注我的公眾號(多多點贊，多多打賞，您的支持是我寫作的最大動力）關注有福利可以使用免費梯子自由上網
iOS_DevTips
木子召
