Flutter AppBar自定义顶部导航按钮，图片，颜色，以及

本文主要是介绍Flutter AppBar自定义顶部导航按钮，图片，颜色，以及，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Flutter AppBar

Flutter AppBar自定义顶部按钮图标，颜色

属性	描述
leading	在标题前面显示的一个控制，在首页通常显示应用的logo，在其他界面通常显示为返回按钮
title	标题，通常显示为当前界面的标题文字，可以放组件
actions	通常使用IconButton来表示，可以放按钮
bottom	通常放tabBar，标题下面显示一个Tab导航栏
backgroundColor	导航背景颜色
iconTheme	图标样式
textTheme	文字样式
centerTitle	标题是否居中显示

main.dart

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: ScaffoldPage(),);}
}class ScaffoldPage extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.red,//设置AppBar背景颜色title: Text("Flutter AppBar"),//设置标题leading: IconButton(icon: Icon(Icons.menu),tooltip: "Search",onPressed: (){print("menu pressed");},),actions: [IconButton(icon: Icon(Icons.search),tooltip: "Search",onPressed: (){print("Search Pressed");},),IconButton(icon: Icon(Icons.more_horiz),tooltip: "more_horiz",onPressed: (){print("more_horiz Pressed");},)],),body: Center(child: Text("center Text..."),),);}
}

Flutter AppBar中自定义TabBar实现顶部Tab切换

TabBar常见属性:

属性	描述
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

coding

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: ScaffoldPage(),);}
}class ScaffoldPage extends StatelessWidget{@overrideWidget build(BuildContext context) {return DefaultTabController(length: 2,child: Scaffold(appBar: AppBar(backgroundColor: Colors.red,//设置AppBar背景颜色title: Text("Flutter AppBar"),//设置标题bottom: TabBar(tabs: [ //设置选项Tab(text: "热门",),Tab(text: "推荐",),],),),body: TabBarView(children: [ListView(children: [ListTile(title: Text("这是第一个Tab"),),ListTile(title: Text("这是第一个Tab"),),ListTile(title: Text("这是第一个Tab"),)],),ListView(children: [ListTile(title: Text("这是第二个Tab"),),ListTile(title: Text("这是第二个Tab"),),ListTile(title: Text("这是第二个Tab"),)],)],),),);}
}

这篇关于Flutter AppBar自定义顶部导航按钮，图片，颜色，以及的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！