Flutter第二講，定義Widget和文字樣式

首先我們來了解下什麼Widget，其實就是相當於iOS開發中的UIView,在dart中Widget分為兩大類

• StatefulWidget (有狀態Widget）

狀態是在構建widget時可以同步讀取的信息，或者在widget的生命週期中可能更改的信息，在Flutter中如果要管理狀態需要用到 StatefulWidget。

• StatelessWidget（無狀態Widget）

Flutter中的StatelessWidget是一個不需要狀態更改的widget - 它沒有要管理的內部狀態。

以上我們先簡單介紹下Widget,後面我們用到再詳細講，下面我們來看看如何定義一個Widget，我們還是用上次的demo的裡的代碼，把Text Widget抽取出來定義成MyWidget

<code>class MyWidget extends StatelessWidget {
  
}
/<code>

那如何把我們的Widget渲染到頁面上呢，其實有個build方法，build方法return什麼就會渲染什麼，我們來寫下build方法

<code>class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text('Hello Flutter', textDirection: TextDirection.ltr,)
    );
  }
}
/<code>

然後我們把main函數里改下

<code>void main(){
  runApp(
   MyWidget()
  );
}
/<code>

運行下跟我們之前的效果是一樣的

最後我們說下dart的一個語法，當一個函數只有一行代碼執行的時候，可以去掉大括號然後改成箭頭,最後我們精簡完就是下面這個樣子

<code>void main() => runApp(MyWidget());
/<code>

image

文字樣式

接下來我們來研究先Text這個Widget，我們點擊去Text類裡查看下

<code>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,
  })
/<code>

const Text()是個構造函數，裡面的this.XXXX都是屬性而且是可選的，我們看見它有個style屬性，我們來設置下看看

<code>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),
    ));
  }
}
/<code> 

我們保存下代碼直接熱重裝看看效果

image

我們把代碼整理下,style抽出來

<code>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,
    ));
  }
}

/<code>

是不是發現我們的_textStyle很像CSS啊，還有就是大家有沒有覺得有了hot reload之後寫UI爽歪歪啊

明天我們來說說MaterialApp和ListView這兩個組件

閱讀更多 新新猿類 的文章

關鍵字: 文字 樣式 Dart