专栏Flutter学习笔记(三) 搭建App

XingJimmy
696 阅读3分钟

上一篇介绍了环境搭建、启动页和新手引导，下面介绍下几个主要界面使用的技术。

一、登录页

登录页比较简单，主要就是用户名、密码输入框和提交按钮。

  1. SafeArea为了适配刘海屏，Flutter提供了SafeArea组件来处理。 bool left、top、right、bottom，表示哪个区域避免。
  2. TextField
TextField(
  decoration: InputDecoration(
    labelText: '请输入github用户名',
    icon: Icon(Style.LOGIN_USER)
  )
),
TextField(
  decoration: InputDecoration(
    hintText: '请输入github密码',
    prefixIcon: Icon(Style.LOGIN_PW)
  ),
),

设置输入框线的颜色

查看InputDecoration源码

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是无效的。

child: TextField(
  decoration: InputDecoration(
      labelText: '请输入github用户名',
      icon: Icon(Style.LOGIN_USER),
      hintStyle: TextStyle(color: Colors.red),
  )
)

以上代码，只能更改hintText的颜色，无法更改线的颜色。

设置线的颜色，只能通过设置Theme中的默认颜色。

Theme(
  data: ThemeData(primaryColor: Colors.blue, hintColor: Colors.red),
  child: TextField(
    decoration: InputDecoration(
        labelText: '请输入github用户名',
        icon: Icon(Style.LOGIN_USER)
    )
  ),
),
  1. 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: () {
  },
)

二、首页

  1. Scaffold

一般App首页，都包括侧边栏、导航栏、AppBar。Flutter提供了这种组件，不需要用户开发者自己组装。

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')
        ],
      )
    );
  1. 导航栏 TabBar

导航栏可以在屏幕底部，或在AppBar的下面，位置不同，在Flutter中实现方式也不同。

(1) 先看下在AppBar下面的，这种需要在AppBar中设置。

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);
  1. 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')
        ],
      )
    );
avatar
文章
阅读
粉丝