专栏首页技术人生初识顶部导航栏【flutter20个实例之一】

初识顶部导航栏【flutter20个实例之一】

一、老套路,先看样式

右侧图是我的实际开发中业务界面,用作展示而已

二、讲解(后附源码)

1.这里主要是用户AppBar组件

/**
    AppBar({
    Key key,
    this.leading,//在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
    this.automaticallyImplyLeading = true,
    this.title,//Toolbar 中主要内容,通常显示为当前界面的标题文字
    this.actions,//一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单
    this.flexibleSpace,//一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用
    this.bottom,//一个 AppBarBottomWidget 对象,通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
    this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar 变为 Toolbar 的时候,修改 elevation 的值
    this.backgroundColor,//APP bar 的颜色,默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
    this.brightness,//App bar 的亮度,有白色和黑色两种主题,默认值为 ThemeData.primaryColorBrightness
    this.iconTheme,//App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
    this.textTheme,//App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
    this.primary = true,
    this.centerTitle,//标题是否居中显示,默认值根据不同的操作系统,显示方式不一样,true居中 false居左
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
    })
 */

2.leading默认是一个返回箭头,有时候我们需要定义,有时候也仅是简单的返回上一层,就需要自定义了,他支持子组件。

如果leading属性未设置,且Scaffold设置了Drawer则显示打开Drawer的图标

如果leading属性未设置,Scaffold也未设置Drawer,此时如果有前一个路由,则显示BackButton

leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            print('返回');
          },
        ),

3.AppBar默认底部有个阴影,如果要去掉

elevation:0;

4.如果想要下方出现一点角度的话

vertical支持顶部和底部

horizontal支持左边和右边

shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(bottom: Radius.circular(10))),

5.底部tab需要用到bottom属性

bottom: TabBar(
            tabs: <Widget>[
              Text('语文'),
              Text('数学'),
              Text('英语'),
              Text('体育'),
              Text('音乐'),
            ],
            controller: TabController(length: 5, vsync: ScrollableState()),
          )

三、源码

import 'package:flutter/material.dart';

class Mytest extends StatefulWidget {
  @override
  _MytestState createState() => _MytestState();
}

class _MytestState extends State<Mytest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
            ),
            onPressed: () {
              print('返回');
            },
          ), //自定义返回图标样式
          automaticallyImplyLeading: false, //设置为false后将不会自动出现返回箭头
          centerTitle: true, //如果想要文字居中的话
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
            )
          ],
          elevation: 0,
          title: Text('songms'),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(bottom: Radius.circular(10))),
          backgroundColor: Colors.orange,
          bottom: TabBar(
            tabs: <Widget>[
              Text('语文'),
              Text('数学'),
              Text('英语'),
              Text('体育'),
              Text('音乐'),
            ],
            controller: TabController(length: 5, vsync: ScrollableState()),
          )),//这个是顶部tab样式,如果不需要可以去掉
      body: Text('这里是内容'),
    );
  }
}

持续更新......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初识顶部导航栏【flutter20个实例之一】

    2.leading默认是一个返回箭头,有时候我们需要定义,有时候也仅是简单的返回上一层,就需要自定义了,他支持子组件。

    sinnoo
  • flutter 键盘弹出 导致超出屏幕

    sinnoo
  • 微信小程序之网络请求【前端】

    sinnoo
  • 初识顶部导航栏【flutter20个实例之一】

    2.leading默认是一个返回箭头,有时候我们需要定义,有时候也仅是简单的返回上一层,就需要自定义了,他支持子组件。

    sinnoo
  • canvas 像素操作

    在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上。将图片绘制上去后,还可以使用 c...

    多云转晴
  • 57.Qt-qRegisterMetaType

    在定义信号槽的时候,传递的参数类型如果是自定义类型(自定义class类,或者enum类等),

    张诺谦
  • 分类模型的评价指标(三)

    假设我现在有一个二分类任务,是分析100封邮件是否是垃圾邮件,其中不是垃圾邮件有65封,是垃圾邮件有35封.模型最终给邮件的结论只有两个:是垃圾邮件与 不是垃圾...

    用户5745385
  • 中学阶段如何规划个人成长及开展科学研究圆桌讨论摘录

    ? 犀牛鸟中学创新科研营作为犀牛鸟中学科学人才培养计划的重要环节于近期开营,开营仪式邀请了哈佛大学、清华大学丘成桐教授、腾讯AI Lab及腾讯Robotics...

    腾讯高校合作
  • C# 实现Winform全屏后不遮挡任务栏,显示任务栏

    最近在忙中抽闲,看我的桌面太过死了,不生动,不可爱=。=。。 然后默默的想写一个动态桌面的一个小东西活泼一下。。。 随后拿起来了N久不碰的C#(本人C#...

    公众号 碧油鸡
  • OAuth 2.0实战(二)-为什么要先获取授权码code?

    xx软件最终是通过访问令牌请求到我的公众号里的文章。访问令牌是通过授权码换来的。你有想过为何要用授权码换令牌,而不直接颁发访问令牌呢?

    JavaEdge

扫码关注云+社区

领取腾讯云代金券