用Flutter構建漂亮的UI介面 - 基礎元件篇

SmallStoneSK發表於2019-07-07
FlutterUI元件

1. 前言

Flutter作為時下最流行的技術之一，憑藉其出色的效能以及抹平多端的差異優勢，早已引起大批技術愛好者的關注，甚至一些閒魚，美團，騰訊等大公司均已開始使用。雖然目前其生態還沒有完全成熟，但身靠背後的Google加持，其發展速度已經足夠驚人，可以預見將來對Flutter開發人員的需求也會隨之增長。

無論是為了現在的技術嚐鮮還是將來的潮流趨勢，都9102年了，作為一個前端開發者，似乎沒有理由不去嘗試它。正是帶著這樣的心理，筆者也開始學習Flutter，同時建了一個用於練習的倉庫，後續所有程式碼都會託管在上面，歡迎star，一起學習。

今天分享的是Flutter中最常用到的一些基礎元件，它們是構成UI介面的基礎元素：容器，行，列，絕對定位佈局，文字，圖片和圖示等。

2. 基礎元件

2.1 Container(容器元件)

用Flutter構建漂亮的UI介面 - 基礎元件篇

Container元件是最常用的佈局元件之一，可以認為它是web開發中的div，rn開發中的View。其往往可以用來控制大小、背景顏色、邊框、陰影、內外邊距和內容排列方式等。我們先來看下其建構函式：

Container({
  Key key,
  double width,
  double height,
  this.margin,
  this.padding,
  Color color,
  this.alignment,
  BoxConstraints constraints,
  Decoration decoration,
  this.foregroundDecoration,
  this.transform,
  this.child,
})
複製程式碼

2.1.1 width，height，margin，padding

這些屬性的含義和我們已經熟知的並沒有區別。唯一需要注意的是，margin和padding的賦值不是一個簡單的數字，因為其有left, top, right, bottom四個方向的值需要設定。Flutter提供了EdgeInsets這個類，幫助我們方便地生成四個方向的值。通常情況下，我們可能會用到EdgeInsets的4種構造方法：

  • EdgeInsets.all(value): 用於設定4個方向一樣的值；
  • EdgeInsets.only(left: val1, top: val2, right: val3, bottom: val4): 可以單獨設定某個方向的值；
  • EdgeInsets.symmetric(horizontal: val1, vertical: val2): 用於設定水平/垂直方向上的值；
  • EdgeInsets.fromLTRB(left, top, right, bottom): 按照左上右下的順序設定4個方向的值。

2.1.2 color

該屬性的含義是背景顏色，等同於web/rn中的backgroundColor。需要注意的是Flutter中有一個專門表示顏色的Color類，而非我們常用的字串。不過我們可以非常輕鬆地進行轉換，舉個栗子：

在web/rn中我們會用'#FF0000'或'red'來表示紅色，而在Flutter中，我們可以用Color(0xFFFF0000)或Colors.red來表示。

2.1.3 alignment

該屬性是用來決定Container元件的子元件將以何種方式進行排列（PS：再也不用為怎麼居中操心了）。其可選值通常會用到：

  • Alignment.topLeft: 左上
  • Alignment.topCenter: 上中
  • Alignment.topRight: 右上
  • Alignment.centerLeft: 左中
  • Alignment.center: 居中
  • Alignment.centerRight: 右中
  • Alignment.bottomLeft: 左下
  • Alignment.bottomCenter: 下中
  • Alignment.bottomRight: 右下

2.1.4 constraints

在web/rn中我們通常會用minWidth/maxWidth/minHeight/maxHeight等屬性來限制容器的寬高。在Flutter中，你需要使用BoxConstraints（盒約束）來實現該功能。

// 容器的大小將被限制在[100*100 ~ 200*200]內
BoxConstraints(
  minWidth: 100,
  maxWidth: 200,
  minHeight: 100,
  maxHeight: 200,
)
複製程式碼

2.1.5 decoration

該屬性非常強大，字面意思是裝飾，因為通過它你可以設定邊框，陰影，漸變，圓角等常用屬性。BoxDecoration繼承自Decoration類，因此我們通常會生成一個BoxDecoration例項來設定這些屬性。

1) 邊框

可以用Border.all建構函式直接生成4條邊框，也可以用Border建構函式單獨設定不同方向上的邊框。不過令人驚訝的是官方提供的邊框竟然不支援虛線（issue在這裡）。

// 同時設定4條邊框：1px粗細的黑色實線邊框
BoxDecoration(
  border: Border.all(color: Colors.black, width: 1, style: BorderStyle.solid)
)

// 設定單邊框：上邊框為1px粗細的黑色實線邊框，右邊框為1px粗細的紅色實線邊框
BoxDecoration(
  border: Border(
    top: BorderSide(color: Colors.black, width: 1, style: BorderStyle.solid),
    right: BorderSide(color: Colors.red, width: 1, style: BorderStyle.solid),
  ),
)
複製程式碼

2) 陰影

陰影屬性和web中的boxShadow幾乎沒有區別，可以指定x，y，blur，spread，color等屬性。

BoxDecoration(
  boxShadow: [
    BoxShadow(
      offset: Offset(0, 0),
      blurRadius: 6,
      spreadRadius: 10,
      color: Color.fromARGB(20, 0, 0, 0),
    ),
  ],
)
複製程式碼

3) 漸變

如果你不想容器的背景顏色是單調的，可以嘗試用gradient屬性。Flutter同時支援線性漸變和徑向漸變：

// 從左到右，紅色到藍色的線性漸變
BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
    colors: [Colors.red, Colors.blue],
  ),
)

// 從中心向四周擴散，紅色到藍色的徑向漸變
BoxDecoration(
  gradient: RadialGradient(
    center: Alignment.center,
    colors: [Colors.red, Colors.blue],
  ),
)
複製程式碼

4) 圓角

通常情況下，你可能會用到BorderRadius.circular建構函式來同時設定4個角的圓角，或是BorderRadius.only建構函式來單獨設定某幾個角的圓角：

// 同時設定4個角的圓角為5
BoxDecoration(
  borderRadius: BorderRadius.circular(5),
)

// 設定單圓角：左上角的圓角為5，右上角的圓角為10
BoxDecoration(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(5),
    topRight: Radius.circular(10),
  ),
)
複製程式碼

2.1.6 transform

transform屬性和我們在web/rn中經常用到的基本也沒有差別，主要包括：平移，縮放、旋轉和傾斜。在Flutter中，封裝了矩陣變換類Matrix4幫助我們進行變換：

  • translationValues(x, y, z): 平移x, y, z；
  • rotationX(radians): x軸旋轉radians弧度；
  • rotationY(radians): y軸旋轉radians弧度；
  • rotationZ(radians): z軸旋轉radians弧度；
  • skew(alpha, beta): x軸傾斜alpha度，y軸傾斜beta度；
  • skewX(alpha): x軸傾斜alpha度；
  • skewY(beta): y軸傾斜beta度；

2.1.7 小結

Container元件的屬性很豐富，雖然有些用法上和web/rn有些許差異，但基本上大同小異，所以過渡起來也不會有什麼障礙。另外，由於Container元件是單子節點元件，也就是隻允許子節點有一個。所以在佈局上，很多時候我們會用Row和Column元件進行行/列佈局。

2.2 Row/Column(行/列元件)

用Flutter構建漂亮的UI介面 - 基礎元件篇

Row和Column元件其實和web/rn中的Flex佈局（彈性盒子）特別相似，或者我們可以就這麼理解。使用Flex佈局的同學對主軸和次軸的概念肯定都已經十分熟悉，Row元件的主軸就是橫向，Column元件的主軸就是縱向。且它們的建構函式十分相似（已省略不常用屬性）：

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  List<Widget> children = const <Widget>[],
})

Column({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  List<Widget> children = const <Widget>[],
})
複製程式碼

2.2.1 mainAxisAlignment

該屬性的含義是主軸排列方式，根據上述建構函式可以知道Row和Column元件在主軸方向上預設都是從start開始，也就是說Row元件預設從左到右開始排列子元件，Column元件預設從上到下開始排列子元件。

當然，你還可以使用其他的可選值：

  • MainAxisAlignment.start
  • MainAxisAlignment.end
  • MainAxisAlignment.center
  • MainAxisAlignment.spaceBetween
  • MainAxisAlignment.spaceAround
  • MainAxisAlignment.spaceEvenly

2.2.2 crossAxisAlignment

該屬性的含義是次軸排列方式，根據上述建構函式可以知道Row和Column元件在次軸方向上預設都是居中。

這裡有一點需要特別注意：由於Column元件次軸方向上（即水平）預設是居中對齊，所以水平方向上不會撐滿其父容器，此時需要指定CrossAxisAlignment.stretch才可以。

另外，crossAxisAlignment其他的可選值有：

  • crossAxisAlignment.start
  • crossAxisAlignment.end
  • crossAxisAlignment.center
  • crossAxisAlignment.stretch
  • crossAxisAlignment.baseline

2.2.3 mainAxisSize

字面意思上來說，該屬性指的是在主軸上的尺寸。其實就是指在主軸方向上，是包裹其內容，還是撐滿其父容器。它的可選值有MainAxisSize.min和MainAxisSize.max。由於其預設值都是MainAxisSize.max，所以主軸方向上預設大小都是儘可能撐滿父容器的。

2.2.4 小結

由於Row/Column元件和我們熟悉的Flex佈局非常相似，所以上手起來非常容易，幾乎零學習成本。

2.3 Stack/Positoned(絕對定位佈局元件)

用Flutter構建漂亮的UI介面 - 基礎元件篇

絕對定位佈局在web/rn開發中也是使用頻率較高的一種佈局方式，Flutter也提供了相應的元件實現，需要將Stack和Positioned元件搭配在一起使用。比如下方的這個例子就是建立了一個黃色的盒子，並且在其四個角落放置了4個紅色的小正方形。Stack元件就是絕對定位的容器，Positioned元件通過left，top，right，bottom四個方向上的屬性值來決定其在父容器中的位置。

Container(
  height: 100,
  color: Colors.yellow,
  child: Stack(
    children: <Widget>[
      Positioned(
        left: 10,
        top: 10,
        child: Container(width: 10, height: 10, color: Colors.red),
      ),
      Positioned(
        right: 10,
        top: 10,
        child: Container(width: 10, height: 10, color: Colors.red),
      ),
      Positioned(
        left: 10,
        bottom: 10,
        child: Container(width: 10, height: 10, color: Colors.red),
      ),
      Positioned(
        right: 10,
        bottom: 10,
        child: Container(width: 10, height: 10, color: Colors.red),
      ),
    ],
  ),
)
複製程式碼

2.4 Text(文字元件)

用Flutter構建漂亮的UI介面 - 基礎元件篇

Text元件也是日常開發中最常用的基礎元件之一，我們通常用它來展示文字資訊。來看下其建構函式（已省略不常用屬性）：

const Text(
  this.data, {
  Key key,
  this.style,
  this.textAlign,
  this.softWrap,
  this.overflow,
  this.maxLines,
})
複製程式碼
  • data: 顯示的文字資訊；
  • style: 文字樣式，Flutter提供了一個TextStyle類，最常用的fontSize，fontWeight，color，backgroundColor和shadows等屬性都是通過它設定的；
  • textAlign: 文字對齊方式，常用可選值有TextAlign的left，right，center和justify；
  • softWrap: 文字是否換行；
  • overflow: 當文字溢位的時候，以何種方式處理（預設直接截斷）。可選值有TextOverflow的clip，fade，ellipsis和visible；
  • maxLines: 當文字超過最大行數還沒顯示完的時候，就會根據overflow屬性決定如何截斷處理。

Flutter的Text元件足夠靈活，提供了各種屬性讓我們定製，不過一般情況下，我們更多地只需下方几行程式碼就足夠了：

Text(
  '這是測試文字',
  style: TextStyle(
    fontSize: 13,
    fontWeight: FontWeight.bold,
    color: Color(0xFF999999),
  ),
)
複製程式碼

除了上述的應用場景外，有時我們還會遇到富文字的需求（即一段文字中，可能需要不同的字型樣式）。比如在一些UI設計中經常會遇到表示價格的時候，￥符號比金額的字號小點。對於此類需求，我們可以用Flutter提供的Text.rich建構函式來建立相應的文字元件：

Text.rich(TextSpan(
  children: [
    TextSpan(
      '￥',
      style: TextStyle(
        fontSize: 12,
        color: Color(0xFFFF7528),
      ),
    ),
    TextSpan(
      '258',
      style: TextStyle(
        fontSize: 15,
        color: Color(0xFFFF7528),
      ),
    ),
  ]
))
複製程式碼

2.5 Image(圖片元件)

用Flutter構建漂亮的UI介面 - 基礎元件篇

Image圖片元件作為豐富內容的基礎元件之一，日常開發中的使用頻率也非常高。看下其建構函式（已省略不常用屬性）：

Image({
  Key key,
  @required this.image,
  this.width,
  this.height,
  this.color,
  this.fit,
  this.repeat = ImageRepeat.noRepeat,
})
複製程式碼
  • image: 圖片源，最常用到主要有兩種（AssetImage和NetworkImage）。使用AssetImage之前，需要在pubspec.yaml檔案中宣告好圖片資源，然後才能使用；而NextworkImage指定圖片的網路地址即可，主要是在載入一些網路圖片時會用到；
  • width: 圖片寬度；
  • height: 圖片高度；
  • color: 圖片的背景顏色，當網路圖片未載入完畢之前，會顯示該背景顏色；
  • fit: 當我們希望圖片根據容器大小進行適配而不是指定固定的寬高值時，可以通過該屬性來實現。其可選值有BoxFit的fill，contain，cover，fitWidth，fitHeight，none和scaleDown；
  • repeat: 決定當圖片實際大小不足指定大小時是否使用重複效果。

另外，Flutter還提供了Image.network和Image.asset建構函式，其實是語法糖。比如下方的兩段程式碼結果是完全一樣的：

Image(
  image: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1402367109,4157195964&fm=27&gp=0.jpg'),
  width: 100,
  height: 100,
)

Image.network(
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1402367109,4157195964&fm=27&gp=0.jpg',
  width: 100,
  height: 100,
)
複製程式碼

2.6 Icon(圖示元件)

用Flutter構建漂亮的UI介面 - 基礎元件篇

Icon圖示元件相比於圖片有著放大不會失真的優勢，在日常開發中也是經常會被用到。Flutter更是直接內建了一套Material風格的圖示（你可以在這裡預覽所有的圖示型別）。看下建構函式：

const Icon(
  this.icon, {
  Key key,
  this.size,
  this.color,
})
複製程式碼
  • icon: 圖示型別；
  • size: 圖示大小；
  • color: 圖示顏色。

3. 佈局實戰

通過上一節的介紹，我們對Container，Row，Column，Stack，Positioned，Text，Image和Icon元件有了初步的認識。接下來，就讓我們通過一個實際的例子來加深理解和記憶。

用Flutter構建漂亮的UI介面 - 基礎元件篇

3.1 準備工作 - 資料型別

根據上述卡片中的內容，我們可以定義一些欄位。為了規範開發流程，我們先給卡片定義一個資料型別的類，這樣在後續的開發過程中也能更好地對資料進行Mock和管理：

class PetCardViewModel {
  /// 封面地址
  final String coverUrl;

  /// 使用者頭像地址
  final String userImgUrl;

  /// 使用者名稱
  final String userName;

  /// 使用者描述
  final String description;

  /// 話題
  final String topic;

  /// 釋出時間
  final String publishTime;

  /// 釋出內容
  final String publishContent;

  /// 回覆數量
  final int replies;

  /// 喜歡數量
  final int likes;

  /// 分享數量
  final int shares;

  const PetCardViewModel({
    this.coverUrl,
    this.userImgUrl,
    this.userName,
    this.description,
    this.topic,
    this.publishTime,
    this.publishContent,
    this.replies,
    this.likes,
    this.shares,
  });
}
複製程式碼

3.2 搭建骨架，佈局拆分

用Flutter構建漂亮的UI介面 - 基礎元件篇

根據給的視覺圖，我們可以將整體進行拆分，一共劃分成4個部分：Cover，UserInfo，PublishContent和InteractionArea。為此，我們可以搭起程式碼的基本骨架：

class PetCard extends StatelessWidget {
  final PetCardViewModel data;

  const PetCard({
    Key key,
    this.data,
  }) : super(key: key);

  Widget renderCover() {
    
  }

  Widget renderUserInfo() {
    
  }

  Widget renderPublishContent() {
  
  }

  Widget renderInteractionArea() {
   
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            blurRadius: 6,
            spreadRadius: 4,
            color: Color.fromARGB(20, 0, 0, 0),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          this.renderCover(),
          this.renderUserInfo(),
          this.renderPublishContent(),
          this.renderInteractionArea(),
        ],
      ),
    );
  }
}
複製程式碼

3.3 封面區域

為了更好的凸現圖片的效果，這裡加了一個蒙層，所以此處剛好可以用得上Stack/Positioned佈局和LinearGradient漸變，Dom結構如下：

code-cover.png

Widget renderCover() {
  return Stack(
    fit: StackFit.passthrough,
    children: <Widget>[
      ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
        child: Image.network(
          data.coverUrl,
          height: 200,
          fit: BoxFit.fitWidth,
        ),
      ),
      Positioned(
        left: 0,
        top: 100,
        right: 0,
        bottom: 0,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color.fromARGB(0, 0, 0, 0),
                Color.fromARGB(80, 0, 0, 0),
              ],
            ),
          ),
        ),
      ),
    ],
  );
}
複製程式碼

3.4 使用者資訊區域

使用者資訊區域就非常適合使用Row和Column元件來進行佈局，Dom結構如下：

code-user-info.png

Widget renderUserInfo() {
  return Container(
    margin: EdgeInsets.only(top: 16),
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          children: <Widget>[
            CircleAvatar(
              radius: 20,
              backgroundColor: Color(0xFFCCCCCC),
              backgroundImage: NetworkImage(data.userImgUrl),
            ),
            Padding(padding: EdgeInsets.only(left: 8)),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  data.userName,
                  style: TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF333333),
                  ),
                ),
                Padding(padding: EdgeInsets.only(top: 2)),
                Text(
                  data.description,
                  style: TextStyle(
                    fontSize: 12,
                    color: Color(0xFF999999),
                  ),
                ),
              ],
            ),
          ],
        ),
        Text(
          data.publishTime,
          style: TextStyle(
            fontSize: 13,
            color: Color(0xFF999999),
          ),
        ),
      ],
    ),
  );
}
複製程式碼

3.5 釋出內容區域

通過這塊區域的UI練習，我們可以實踐Container元件設定不同的borderRadius，以及Text元件文字內容超出時的截斷處理，Dom結構如下：

code-publish-content.png

Widget renderPublishContent() {
  return Container(
    margin: EdgeInsets.only(top: 16),
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(bottom: 14),
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: Color(0xFFFFC600),
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(8),
              bottomLeft: Radius.circular(8),
              bottomRight: Radius.circular(8),
            ),
          ),
          child: Text(
            '# ${data.topic}',
            style: TextStyle(
              fontSize: 12,
              color: Colors.white,
            ),
          ),
        ),
        Text(
          data.publishContent,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.bold,
            color: Color(0xFF333333),
          ),
        ),
      ],
    ),
  );
}
複製程式碼

3.6 互動區域

在這個模組，我們會用到Icon圖示元件，可以控制其大小和顏色等屬性，Dom結構如下：

code-interaction-area.png

Widget renderInteractionArea() {
  return Container(
    margin: EdgeInsets.symmetric(vertical: 16),
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          children: <Widget>[
            Icon(
              Icons.message,
              size: 16,
              color: Color(0xFF999999),
            ),
            Padding(padding: EdgeInsets.only(left: 6)),
            Text(
              data.replies.toString(),
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF999999),
              ),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            Icon(
              Icons.favorite,
              size: 16,
              color: Color(0xFFFFC600),
            ),
            Padding(padding: EdgeInsets.only(left: 6)),
            Text(
              data.likes.toString(),
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF999999),
              ),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            Icon(
              Icons.share,
              size: 16,
              color: Color(0xFF999999),
            ),
            Padding(padding: EdgeInsets.only(left: 6)),
            Text(
              data.shares.toString(),
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF999999),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}
複製程式碼

3.7 小結

通過上面的一個例子，我們成功地把一個看起來複雜的UI介面一步步拆解，將之前提到的元件都用了個遍，並且最終得到了不錯的效果。其實，日常開發中90%以上的需求都離不開上述提到的基礎元件。因此，只要稍加練習，熟悉了Flutter中的基礎元件用法，就已經算是邁出了一大步哦~

這裡還有銀行卡和朋友圈的UI練習例子，由於篇幅原因就不貼程式碼了，可以去github倉庫看。

4. 總結

本文首先介紹了Flutter中構建UI介面最常用的基礎元件（容器，行，列，絕對定位佈局，文字，圖片和圖示）用法。接著，介紹了一個較複雜的UI實戰例子。通過對Dom結構的層層拆解，前文提到過的元件得到一個綜合運用，也算是鞏固了前面所學的概念知識。

不過最後不得不吐槽一句：Flutter的巢狀真的很難受。。。如果不對UI佈局進行模組拆分，那絕對是噩夢般的體驗。而且不像web/rn開發樣式可以單獨抽離，Flutter這種將樣式當做屬性的處理方式，一眼看去真的很難理清dom結構，對於新接手程式碼的開發人員而言，需要費點時間理解。。。

本文所有程式碼託管在這兒，也可以關注我的Blog。

相關文章