專欄Flutter學習筆記(三) 搭建App

時間 2019-12-12

原文原文鏈接

上一篇介紹了環境搭建、啓動頁和新手引導，下面介紹下幾個主要界面使用的技術。git

1、登陸頁

登陸頁比較簡單，主要就是用戶名、密碼輸入框和提交按鈕。github

SafeArea爲了適配劉海屏，Flutter提供了SafeArea組件來處理。 bool left、top、right、bottom，表示哪一個區域避免。
TextField

TextField(
  decoration: InputDecoration(
    labelText: '請輸入github用戶名',
    icon: Icon(Style.LOGIN_USER)
  )
),
TextField(
  decoration: InputDecoration(
    hintText: '請輸入github密碼',
    prefixIcon: Icon(Style.LOGIN_PW)
  ),
),
複製代碼

設置輸入框線的顏色數組

查看InputDecoration源碼bash

border ??= _getDefaultBorder(themeData);
Color borderColor;
if (decoration.enabled) {
  borderColor = decoration.errorText == null
    ? _getActiveColor(themeData)
    : themeData.errorColor;
} else {
  borderColor = (decoration.filled == true && decoration.border?.isOutline != true)
    ? Colors.transparent
    : themeData.disabledColor;
}
Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}
複製代碼

可見，線使用的是Theme中的默認顏色，因此更改decoration中的hintColor是無效的。app

child: TextField(
  decoration: InputDecoration(
      labelText: '請輸入github用戶名',
      icon: Icon(Style.LOGIN_USER),
      hintStyle: TextStyle(color: Colors.red),
  )
)
複製代碼

以上代碼，只能更改hintText的顏色，沒法更改線的顏色。ide

設置線的顏色，只能經過設置Theme中的默認顏色。ui

Theme(
  data: ThemeData(primaryColor: Colors.blue, hintColor: Colors.red),
  child: TextField(
    decoration: InputDecoration(
        labelText: '請輸入github用戶名',
        icon: Icon(Style.LOGIN_USER)
    )
  ),
),
複製代碼

RaisedButton

RaisedButton(
  padding: new EdgeInsets.only(left: 20.0, top: 10.0, right: 20.0, bottom: 10.0),
  color: Theme.of(context).primaryColor,
  textColor: Colors.white,
  child: new Flex(
    mainAxisAlignment: MainAxisAlignment.center,
    direction: Axis.horizontal,
    children: <Widget>[new Text('Login')],
  ),
  // 不添加onPressed，文字顏色設置很差用，也沒有陰影效果
  onPressed: () {
  },
)
複製代碼

2、首頁

Scaffold

通常App首頁，都包括側邊欄、導航欄、AppBar。Flutter提供了這種組件，不須要用戶開發者本身組裝。this

Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text('Flutter Demo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
            },
          )
        ],
      ),
      bottomNavigationBar: Material(
        //爲了適配主題風格，包一層Material實現風格套用
        color: Theme.of(context).primaryColor, //底部導航欄主題顏色
        child: TabBar(
          controller: _tabController,
          tabs: _tabs,
        )
      ),
      drawer: HomeDrawer(),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Page('PAGE 1'),
          Page('PAGE 2'),
          Page('PAGE 3')
        ],
      )
    );
複製代碼

導航欄 TabBar

導航欄能夠在屏幕底部，或在AppBar的下面，位置不一樣，在Flutter中實現方式也不一樣。spa

(1) 先看下在AppBar下面的，這種須要在AppBar中設置。code

AppBar(
  backgroundColor: Theme.of(context).primaryColor,
  title: Text('Flutter Demo'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
      },
    )
  ],
  bottom: TabBar(
    controller: _tabController,
    tabs: _tabs,
  ),
),
複製代碼

在AppBar中bottom設置成TabBar對象便可。

(2) 在屏幕底部的，經過bottomNavigationBar設置

Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text('Flutter Demo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
            },
          )
        ],
      ),
      bottomNavigationBar: Material(
        //爲了適配主題風格，包一層Material實現風格套用
        color: Theme.of(context).primaryColor, //底部導航欄主題顏色
        child: TabBar(
          controller: _tabController,
          tabs: _tabs,
        )
      ),
)
複製代碼

最後看下TabBar的主要屬性

TabController 用於控制/監聽Tab菜單切換

Tabs: 接受一個Widget數組，表示每個Tab子菜單，能夠自定義，也能夠直接使用Tab Widget，它也是Material組件庫提供的Material風格的Tab菜單。

注意：在建立TabController時，須要TickerProvider屬性。所以，類須要添加 with SingleTickerProviderStateMixin。

class HomeState extends State<Home>
    with SingleTickerProviderStateMixin {

_tabController = TabController(length: _tabs.length, vsync: this);
複製代碼

TabBarView 經過body屬性設置成TabBarView，實現的Tab切換時加載的Widget。能夠自定義Widget。

主要controller要和TabBar的設置成一個，以此來保持同步切換。

Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text('Flutter Demo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
            },
          )
        ]
      ),
      bottomNavigationBar: Material(
        //爲了適配主題風格，包一層Material實現風格套用
        color: Theme.of(context).primaryColor, //底部導航欄主題顏色
        child: TabBar(
          controller: _tabController,
          tabs: _tabs,
        )
      ),
      drawer: HomeDrawer(),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Page('PAGE 1'),
          Page('PAGE 2'),
          Page('PAGE 3')
        ],
      )
    );
複製代碼