当前位置： 移动技术网 > IT编程>移动开发>Android > Flutter学习笔记（16）--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

Flutter学习笔记（16）--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

2019年08月16日  | 移动技术网IT编程  | 我要评论

七个人1.58,廖汉生,张庭被疑年龄造假

如需转载，请注明出处：flutter学习笔记（16）--scaffold脚手架、appbar组件、bottomnavigationbar组件

今天的内容是scaffold脚手架、appbar组件、bottomnavigationbar组件，通过这三个组件，能大体构建出一个app的主页面，顶导和底导。

  • scaffold（脚手架组件）

scaffold实现了基本的material design布局，只要是在material design中定义过的单个界面显示的布局控件元素，都可以使用scaffold来绘制。

scaffold组件属性及描述
属性名 类型 说明
appbar appbar 显示在界面顶部的一个appbar
body widget 当前界面所显示的主要内容
floatingactionbutton widget 在material design中定义的一个功能按钮
persistentfooterbuttons list<widget> 固定在下方展示的按钮
drawer widget 侧边栏组件
bottomnavigationbar widget 显示在底部的导航栏按钮
backgroundcolor color 背景颜色
resizetoavoidbottompadding bool 控制界面内容body是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免键盘遮盖住内容，默认值为true

 

 

 

 

 

 

 

 

 

 

 

 

 

 

demo示例：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'scaffold demo',
      home: new scaffold(
        appbar: new appbar(
          title: new text('scaffold demo'),
        ),
        body: new center(
          child: new text('scaffold dmoe 脚手架组件'),
        ),
        //底部导航按钮
        bottomnavigationbar: new bottomappbar(
          child: new container(width: 100,height: 100,),
        ),
        backgroundcolor: colors.deeporange,
      ),
    );
  }
}

效果截图：

  • appbar（导航）

应用中的顶部导航有两种，一种appbar一种silveapprbar，这两种对应android中的toolbar，appbar和sliveapprbar都是继承自statefulwidget，这两者的区别是appbar是固定在应用的最上面，就是页面的最顶部，而sliveapprbar是可以跟随内容滚动的。

appbar及sliverappbar组件属性及描述
属性名 类型 默认值 说明
leading widget null 在标题前面显示的一个组件，一般情况下展示按钮，比如返回按钮
title widget null 通常显示为当前页面的标题名
actions list<widget> null 一个widget列表，一般情况下展示的也是按钮，比如搜索按钮等
bottom preferredsizewidget null 通常是tabbar，用来在toolbar标题栏下面显示一个tab导航栏
elevation double 4 纸墨设计中组件的z坐标顺序，对于可滚动的sliverbar，当sliverbar和内容同级的时候，该值为0，当内容滚动sliverappbar变为toolbar的时候，修改为elevation的值
flexiblespace widget null 一个显示在appbar下方的组件，高度和appbar的高度一样，可以实现一些特殊的效果，该属性通常在sliverappbar中使用
backgroundcolor color themedata.primarycolor 背景色
brightness brightness themedata.primarycolorbrightness appbar的亮度，有白色和黑色两种主题
icontheme iconthemedata themedata.primaryicontheme appbar上图标的颜色、透明度和尺寸信息
texttheme texttheme themedata.primarytexttheme appbar上的文字样式
centertitle bool true 标题显示是否居中，默认值根据不同的操作系统，显示的方式不一样

 

示例代码：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      debugshowmaterialgrid: false,
      debugshowcheckedmodebanner: false,
      title: 'appbar demo',
      home: new scaffold(
        appbar: new appbar(
          backgroundcolor: colors.cyanaccent,//标题栏北京设置为浅蓝色
          leading: icon(icons.menu),//标题左侧按钮
          icontheme: iconthemedata(color: colors.amberaccent,opacity: 30,size: 25),//icon的主题，会作用到appbar上的所有icon(不包含iconbutton，因为iconbutton是个button)
          title: new text('appbar demo',style: textstyle(color: colors.deeppurple,fontsize: 20),),//标题文案及字体样式设置
          actions: <widget>[
            iconbutton(icon: icon(icons.search),tooltip: '搜索', onpressed: null),//标题右侧按钮
            iconbutton(icon: icon(icons.add),tooltip: '添加', onpressed: null)//标题右侧按钮
          ],
        ),
      ),
    );
  }

}

 

这些东西在前面的demo都用过很多次了，就不多加说明了，看下效果截图：

  • bottomnavigationbar（底部导航条组件）

bottomnaviationbar是底部导航条，主要由按钮加文字组成，按下按钮切换不同的页面，需要一个当前的索引来控制当前具体切换的页面，可以很容易的在tab之间切换和浏览顶级试图，很多app主页底部都采用这种切换的方式。

bottomnavigationbar组件属性及描述
属性名 类型 说明
currentindex int 当前索引，用来切换按钮控制
fixedcolor color 选中按钮的颜色，如果没有指定值，则用系统主题色
iconsize double 按钮图标大小
items list<bottomnavigationbaritem> 底部导航条按钮集，每一项是一个bottomnavigationbaritem，由icon图标及title文本属性
ontap valuechanged<int> 按下其中某一个按钮回调事件，需要根据返回的索引设置当前索引

 

 

 

 

 

 

 

 

 

 

写一个简单的demo，底部导航放置3个选项卡，每点击一个选项卡，屏幕中间的文案随之变化，先看下代码和结果，然后讲一下代码的内容。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'bottomnavigationbar demo',
      home: new scaffold(
        appbar: new appbar(
          title: new text('bottomnavigationbar demo'),
          leading: icon(icons.menu),
          actions: <widget>[
            iconbutton(icon: icon(icons.search), onpressed: null)
          ],
        ),
        body: myhomepage(),
      ),
    );
  }
}

class myhomepage extends statefulwidget {
  @override
  state<statefulwidget> createstate() {
    return new _myhomepagestate();
  }
}

class _myhomepagestate extends state {
  var _selectedindex = 0;
  var _selectedtext = [
    new text('相机'),
    new text('扫码'),
    new text('闹钟'),
  ];
  @override
  widget build(buildcontext context) {
    return new scaffold(
      body: new center(
        child: _selectedtext.elementat(_selectedindex),
      ),
      bottomnavigationbar: new bottomnavigationbar(
        items: <bottomnavigationbaritem>[
          bottomnavigationbaritem(icon: icon(icons.add_a_photo),title: new text('相机')),
          bottomnavigationbaritem(icon: icon(icons.center_focus_weak),title: new text('扫码')),
          bottomnavigationbaritem(icon: icon(icons.add_alarm),title: new text('闹钟')),
        ],
        currentindex: _selectedindex,
        ontap: _onitemtapped,
        fixedcolor: colors.amberaccent,
      ),
    );
  }

  void _onitemtapped(int value) {
    setstate(() {
      _selectedindex = value;
    });
  }
}

 

首先要清楚的一点，有状态变化，所以要用statefulwidget有状态组件，其次要想屏幕中间的文案和底部导航按钮要随点击事件的触发而变化，必然要有初始的索引值和文案的组件数组

  var _selectedindex = 0;
  var _selectedtext = [
    new text('相机'),
    new text('扫码'),
    new text('闹钟'),
  ];

 

这里的_selectedtext数组里面装的是3个text组件，每次点击底部导航的按钮，都会根据索引值将这3个text分别放进child里面，接下来就行处理我们的bottomnavigationbar，上面的bottomnavigationbar属性表里面说过所有的选项卡都是放在items集合里面的，currentindex处理点击后当前选项的索引值，ontap处理点击事件，fixedcolor处理点击选项卡的颜色（包含按钮及文本的颜色）

bottomnavigationbar: new bottomnavigationbar(
        items: <bottomnavigationbaritem>[
          bottomnavigationbaritem(icon: icon(icons.add_a_photo),title: new text('相机')),
          bottomnavigationbaritem(icon: icon(icons.center_focus_weak),title: new text('扫码')),
          bottomnavigationbaritem(icon: icon(icons.add_alarm),title: new text('闹钟')),
        ],
        currentindex: _selectedindex,
        ontap: _onitemtapped,
        fixedcolor: colors.amberaccent,
      ),

 

最后看一下事件的处理_onitemtapped，其实很简单，就是更新bottomnavigationbar的索引值，并且通过setstate通知页面重新绘制，最终呈现出我们想要的效果。

 

好啦，今天就先学这么多！该睡觉啦

 

下一章节：flutter学习笔记（16）--scaffold脚手架、appbar组件、bottomnavigationbar组件

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网