Flutter基础控件:Appbar

@TOCAppbar

类似iOS导航栏,但有一定区别
在这里插入图片描述

Appbar属性

leading

在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。

automaticallyImplyLeading

如果没有leading,automaticallyImplyLeading为true,就会默认返回箭头
如果 没有leading 且为false,空间留给title
如果有leading,这个参数就无效了

title

标题

actions

导航栏右侧按钮数组

flexibleSpace

一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用

bottom

一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏

elevation

阴影的高度。默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值。

shape

阴影

backgroundColor

Appbar 的背景色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。

brightness

Appbar 的亮度,有白色和黑色两种主题,默认值为

iconTheme

icon主题。默认值为 ThemeData.primaryIconTheme。;修改iconTheme会修改所有的icon的样式,不仅仅是左侧的,右侧的也会改变

actionsIconTheme

选中icon主题

textTheme

文本主题设置

primary

appbar是否显示在导航栏的顶部,为false是显示在顶部,为true就显示在导航栏的中部

centerTitle

标题是否居中显示

titleSpacing

标题间距,如果希望title占用所有可用空间,请将此值设置为0.0。
默认为NavigationToolbar.kMiddleSpacing。

toolbarOpacity

应用程序栏的工具栏的透明程度。值1.0是完全不透明的,值0.0是完全透明的

bottomOpacity

appBar底部透明度,设置方式同toolbarOpacity

例子

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp 安卓风格APP
    return new MaterialApp(
      title: 'welcome',
      // scoffold 脚手架
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页'),
          leading: new Icon(Icons.home),
          actions: <Widget>[
            new IconButton(
                icon: new Icon(Icons.add_alarm),
                tooltip: 'Add Alarm',
                onPressed: () {}),
          ],
          backgroundColor: Colors.red,
          primary: true,
          iconTheme: IconThemeData(color: Colors.yellow, size: 30, opacity: 1),
          toolbarOpacity: 0.5,
        ),
        body: new Center(
          child: new Row(
            children: <Widget>[
              new Expanded(
                child: RaisedButton(
                  onPressed: () {},
                  color: Colors.red,
                  textColor: Colors.white,
                  disabledColor: Colors.blueGrey,
                  child: Text('Button', style: TextStyle(fontSize: 12)),
                ),
              ),
              new Expanded(
                child: new Text(
                  'yayayay',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontSize: 35.0,
                      background: Paint()..color = Colors.red[50]),
                ),
              ),
            ],
          ),
        ),
        backgroundColor: Colors.yellow,
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
            BottomNavigationBarItem(
                icon: Icon(Icons.message), title: Text("消息")),
          ],
          fixedColor: Colors.blue,
        ),
      ),
    );
  }
}

参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值