锐客网

  1. 首页 > 睿知 > it技术 > >

AppBar 自定义顶部导航按钮 图标颜色 以及 TabBar 定义顶部 Tab 切换

IT知识导航自定义自定

【AppBar 自定义顶部导航按钮 图标颜色 以及 TabBar 定义顶部 Tab 切换】男儿欲遂平生志，六经勤向窗前读。这篇文章主要讲述AppBar 自定义顶部导航按钮 图标颜色 以及 TabBar 定义顶部 Tab 切换相关的知识，希望能为你提供帮助。
一、Flutter AppBar 自定义顶部按钮图标、颜色 leading    在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮 title  标题，通常显示为当前界面的标题文字，可以放组件 actions    通常使用 IconButton 来表示，可以放按钮组 bottom    通常放 tabBar，标题下面显示一个 Tab 导航栏 backgroundColor    导航背景颜色 iconTheme    图标样式 textTheme    文字样式 centerTitle    标题是否居中显示     二、Flutter AppBar 中自定义 TabBar 实现顶部 Tab 切换tabs    显示的标签内容，一般使用 Tab 对象,也可以是其他的 Widget controller  TabController 对象 isScrollable    是否可滚动 indicatorColor    指示器颜色 indicatorWeight  指示器高度 indicatorPadding    底部指示器的 Padding indicator    指示器 decoration，例如边框等 indicatorSize    指示器大小计算方式，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽 labelColor    选中 label 颜色 labelStyle  选中 label 的 Style labelPadding    每个 label 的 padding 值 unselectedLabelColor    未选中 label 颜色 unselectedLabelStyle    未选中 label 的 Style   案例代码

import ‘package:flutter/material.dart‘;

class ClassIf extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Row( // 或者buttom
children: < Widget> [
Expanded(
flex: 1,
child: TabBar(
tabs: < Widget> [
Tab(text: ‘分类一‘),
Tab(text: ‘分类二‘)
],
),
)
],
),
),
body: TabBarView(
children: < Widget> [
ListView(
children: < Widget> [
Text(‘132‘),
Text(‘132‘),
Text(‘132‘),
],
),
ListView(
children: < Widget> [
Text(‘132‘),
Text(‘132‘),
Text(‘132‘),
],
)
],
),
),
);
}
}


    推荐阅读


    上一篇：Android学习（Week1）

    下一篇：自行搭建Android4.4编译环境