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

2023-01-29 15:01| 来源: 网络整理| 查看: 265

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

main.dart

import &＃39;package:flutter/material.dart&＃39;;void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: &＃39;Flutter Demo&＃39;,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对象，也可以是其他的WidgetcontrollerTabController对象isScrollable是否可滚动indicatorColor指示器颜色indicatorWeight指示器高度indicatorPadding底部指示器的Paddingindicator指示器decoration，列如边框等indicatorSize指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽度，TabBarIndicatorSize.tab跟每个tab等宽labelColor选择label颜色labelStyle选中label的StylelabelPadding每个label的padding值unselectedLabelColor未选中label颜色unselectedLabelStyle未选中label的Style

coding

import &＃39;package:flutter/material.dart&＃39;;void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: &＃39;Flutter Demo&＃39;,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"),)],)],),),);}}

【本文地址】

公司简介

联系我们