专栏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')
        ],
      )
    );
复制代码