Material Design 布局和结构控件
MaterialApp
MaterialApp 是 Flutter 中的主要应用小部件,提供了一个 Material Design 风格的应用框架。它封装了导航、主题、路由和许多其他配置选项
属性解析
const MaterialApp({
super.key,
this.navigatorKey,
this.scaffoldMessengerKey,
this.home,
Map<String, WidgetBuilder> this.routes = const <String, WidgetBuilder>{},
this.initialRoute,
this.onGenerateRoute,
this.onGenerateInitialRoutes,
this.onUnknownRoute,
this.onNavigationNotification,
List<NavigatorObserver> this.navigatorObservers = const <NavigatorObserver>[],
this.builder,
this.title = '',
this.onGenerateTitle,
this.color,
this.theme,
this.darkTheme,
this.highContrastTheme,
this.highContrastDarkTheme,
this.themeMode = ThemeMode.system,
this.themeAnimationDuration = kThemeAnimationDuration,
this.themeAnimationCurve = Curves.linear,
this.locale,
this.localizationsDelegates,
this.localeListResolutionCallback,
this.localeResolutionCallback,
this.supportedLocales = const <Locale>[Locale('en', 'US')],
this.debugShowMaterialGrid = false,
this.showPerformanceOverlay = false,
this.checkerboardRasterCacheImages = false,
this.checkerboardOffscreenLayers = false,
this.showSemanticsDebugger = false,
this.debugShowCheckedModeBanner = true,
this.shortcuts,
this.actions,
this.restorationScopeId,
this.scrollBehavior,
@Deprecated(
'Remove this parameter as it is now ignored. '
'MaterialApp never introduces its own MediaQuery; the View widget takes care of that. '
'This feature was deprecated after v3.7.0-29.0.pre.'
)
this.useInheritedMediaQuery = false,
this.themeAnimationStyle,
})
- navigatorKey (GlobalKey?): 全局键,用于控制导航。
- scaffoldMessengerKey (GlobalKey?): 用于控制 ScaffoldMessenger 的全局键。
- home (Widget?): 应用程序启动时显示的主屏幕小部件。
- routes (Map<String, WidgetBuilder>): 定义命名路由及其对应的小部件。
- initialRoute (String?): 应用程序启动时显示的初始路由。
- onGenerateRoute (RouteFactory?): 当导航到某个命名路由时,如果该路由未在 routes 表中定义,则调用此回调生成路由。
- onGenerateInitialRoutes (InitialRouteListFactory?): 提供一个函数来生成初始路由列表。
- onUnknownRoute (RouteFactory?): 当导航到未知路由时调用的回调函数。
- onNavigationNotification (NavigationNotificationCallback?): 当接收到导航通知时调用的回调函数。
- navigatorObservers (List): 导航观察者列表,用于监控导航事件。
- builder (TransitionBuilder?): 在导航小部件构建之后调用的函数,可以用于添加额外的小部件,如 Overlay。
- title (String): 应用程序的标题。
- onGenerateTitle (GenerateAppTitle?): 生成应用程序标题的回调函数。
- color (Color?): 应用程序的主要颜色,在 Android 上用于任务管理器中的应用程序条的背景色。
- theme (ThemeData?): 应用程序的主题数据。
- darkTheme (ThemeData?): 应用程序的暗色主题数据。
- highContrastTheme (ThemeData?): 高对比度主题数据。
- highContrastDarkTheme (ThemeData?): 高对比度暗色主题数据。
- themeMode (ThemeMode): 主题模式(系统、浅色或深色)。
- themeAnimationDuration (Duration): 主题切换动画的持续时间。
- themeAnimationCurve (Curve): 主题切换动画的曲线。
- locale (Locale?): 应用程序的语言环境。
- localizationsDelegates (Iterable?): 本地化代理列表。
- localeListResolutionCallback (LocaleListResolutionCallback?): 回调函数,用于从设备支持的语言环境列表中选择应用程序的语言环境。
- localeResolutionCallback (LocaleResolutionCallback?): 回调函数,用于从设备支持的单一语言环境中选择应用程序的语言环境。
- supportedLocales (Iterable): 支持的语言环境列表。
- debugShowMaterialGrid (bool): 是否在调试模式下显示 Material 网格指示器。
- showPerformanceOverlay (bool): 是否显示性能叠加层。
- checkerboardRasterCacheImages (bool): 是否显示瓦片缓存图像的棋盘格。
- checkerboardOffscreenLayers (bool): 是否显示离屏层的棋盘格。
- showSemanticsDebugger (bool): 是否显示语义调试器。
- debugShowCheckedModeBanner (bool): 是否在调试模式下显示右上角的 “DEBUG” 横幅。
- shortcuts (Map<LogicalKeySet, Intent>?): 全局快捷键映射。
- actions (Map<Type, Action>?): 全局操作映射。
- restorationScopeId (String?): 恢复范围 ID。
- scrollBehavior (ScrollBehavior?): 滚动行为。
- useInheritedMediaQuery (bool): 已弃用参数,不再使用。
- themeAnimationStyle (ThemeAnimationStyle?): 主题动画样式。
示例
class WidgetPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system,
home: HomeScreen(),
routes: {
'/second': (context) => SecondScreen(),
},
initialRoute: '/',
onGenerateRoute: (settings) {
if (settings.name == '/third') {
return MaterialPageRoute(builder: (context) => ThirdScreen());
}
return null;
},
onUnknownRoute: (settings) {
return MaterialPageRoute(builder: (context) => UnknownScreen());
},
supportedLocales: [
Locale('en', 'US'),
Locale('es', 'ES'),
],
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Home Screen'),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Text('Go to Second Screen'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/third');
},
child: Text('Go to Third Screen'),
),
],
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Text('Second Screen'),
),
);
}
}
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Third Screen'),
),
body: Center(
child: Text('Third Screen'),
),
);
}
}
class UnknownScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Unknown Screen'),
),
body: Center(
child: Text('Unknown Screen'),
),
);
}
}
&nsbp;
Scaffold
Scaffold 是 Flutter 中用于实现基本的 Material Design 布局结构的小部件。它提供了一个默认的页面框架,包括应用栏、抽屉、浮动操作按钮和底部导航栏等元素。
属性解析
const Scaffold({
super.key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
this.drawer,
this.onDrawerChanged,
this.endDrawer,
this.onEndDrawerChanged,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
this.drawerEnableOpenDragGesture = true,
this.endDrawerEnableOpenDragGesture = true,
this.restorationId,
})
- appBar (PreferredSizeWidget?): 页面顶部的应用栏。
- body (Widget?): Scaffold 的主要内容区域。
- floatingActionButton (Widget?): 浮动操作按钮,通常用于突出显示的主操作。
- floatingActionButtonLocation (FloatingActionButtonLocation?): 控制浮动操作按钮的位置。
- floatingActionButtonAnimator (FloatingActionButtonAnimator?): 浮动操作按钮的动画效果。
- persistentFooterButtons (List?): 固定在底部的一组按钮。
- persistentFooterAlignment (AlignmentDirectional): 固定按钮的对齐方式,默认为 AlignmentDirectional.centerEnd。
- drawer (Widget?): 左侧滑出的抽屉菜单。
- onDrawerChanged (DrawerCallback?): 当抽屉打开或关闭时的回调。
- endDrawer (Widget?): 右侧滑出的抽屉菜单。
- onEndDrawerChanged (DrawerCallback?): 当右侧抽屉打开或关闭时的回调。
- bottomNavigationBar (Widget?): 底部导航栏,通常用于应用程序的主要导航。
- bottomSheet (Widget?): 固定在底部的面板,可以覆盖其他内容。
- backgroundColor (Color?): Scaffold 的背景颜色。
- resizeToAvoidBottomInset (bool?): 内容是否因避开键盘而调整大小。
- primary (bool): 是否包含顶部的系统状态栏,默认为 true。
- drawerDragStartBehavior (DragStartBehavior): 抽屉拖动开始行为,默认为 DragStartBehavior.start。
- extendBody (bool): 主体是否延伸到屏幕底部导航栏后面,默认为 false。
- extendBodyBehindAppBar (bool): 主体是否延伸到应用栏后面,默认为 false。
- drawerScrimColor (Color?): 抽屉打开时遮罩的颜色。
- drawerEdgeDragWidth (double?): 从边缘开始拖动以打开抽屉的触发距离。
- drawerEnableOpenDragGesture (bool): 是否可以通过手势打开左侧抽屉,默认为 true。
- endDrawerEnableOpenDragGesture (bool): 是否可以通过手势打开右侧抽屉,默认为 true。
- restorationId (String?): 用于状态恢复的 ID。
示例
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Text('Home Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Business Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('School Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scaffold Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
AppBar
AppBar 是 Flutter 中用于显示在 Scaffold 顶部的应用栏。它可以包含标题、导航按钮、动作按钮等元素,并提供了许多自定义选项。
属性解析
AppBar({
super.key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.scrolledUnderElevation,
this.notificationPredicate = defaultScrollNotificationPredicate,
this.shadowColor,
this.surfaceTintColor,
this.shape,
this.backgroundColor,
this.foregroundColor,
this.iconTheme,
this.actionsIconTheme,
this.primary = true,
this.centerTitle,
this.excludeHeaderSemantics = false,
this.titleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
this.toolbarHeight,
this.leadingWidth,
this.toolbarTextStyle,
this.titleTextStyle,
this.systemOverlayStyle,
this.forceMaterialTransparency = false,
this.clipBehavior,
})
- leading (Widget?): 显示在应用栏左侧的小部件,通常是返回按钮或菜单按钮。
- automaticallyImplyLeading (bool): 是否根据当前路由自动添加返回按钮或抽屉图标,默认为 true。
- title (Widget?): 显示在应用栏中间的主要内容,通常是文本标题。
- actions (List?): 显示在应用栏右侧的一组小部件,通常是操作按钮。
- flexibleSpace (Widget?): 一个可伸缩的小部件,通常用于实现复杂的应用栏布局,如背景图像或渐变色。
- bottom (PreferredSizeWidget?): 应用栏底部的扩展区域,通常是 TabBar。
- elevation (double?): 应用栏的阴影高度。
- scrolledUnderElevation (double?): 当滚动到此应用栏下方时的阴影高度。
- notificationPredicate (ScrollNotificationPredicate): 决定何时触发 - scrolledUnderElevation 的回调,默认为 defaultScrollNotificationPredicate。
- shadowColor (Color?): 阴影颜色。
- surfaceTintColor (Color?): 表面色调颜色。
- shape (ShapeBorder?): 应用栏的形状及边框样式。
- backgroundColor (Color?): 应用栏的背景颜色。
- foregroundColor (Color?): 应用栏上内容的前景颜色(如文字和图标)。
- iconTheme (IconThemeData?): 应用栏图标的主题样式。
- actionsIconTheme (IconThemeData?): 应用栏操作按钮图标的主题样式。
- primary (bool): 应用栏是否显示在顶部状态栏之下,默认为 true。
- centerTitle (bool?): 是否将标题居中对齐。
- excludeHeaderSemantics (bool): 是否排除头部的语义信息,默认为 false。
- titleSpacing (double?): 标题与应用栏两侧的间距。
- toolbarOpacity (double): 工具栏的透明度,默认为 1.0。
- bottomOpacity (double): 底部扩展区域的透明度,默认为 1.0。
- toolbarHeight (double?): 工具栏的高度。
- leadingWidth (double?): leading 小部件的宽度。
- toolbarTextStyle (TextStyle?): 工具栏中所有文本的默认样式。
- titleTextStyle (TextStyle?): 标题的文本样式。
- systemOverlayStyle (SystemUiOverlayStyle?): 系统状态栏样式(如状态栏图标和文字的颜色)。
- forceMaterialTransparency (bool): 强制应用栏为透明背景,默认为 false。
示例
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
// 打开左侧抽屉
},
),
title: Text('AppBar Example'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// 执行搜索操作
},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {
// 打开更多选项菜单
},
),
],
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home), text: 'Home'),
Tab(icon: Icon(Icons.business), text: 'Business'),
Tab(icon: Icon(Icons.school), text: 'School'),
],
),
elevation: 10.0,
shadowColor: Colors.grey,
backgroundColor: Colors.blueAccent,
centerTitle: true,
toolbarHeight: 70.0,
),
body: TabBarView(
children: [
Center(child: Text('Home content goes here')),
Center(child: Text('Business content goes here')),
Center(child: Text('School content goes here')),
],
),
);
}
}
BottomNavigationBar
BottomNavigationBar 是 Flutter 中用于实现底部导航栏的小部件,通常用于在应用程序的不同页面之间进行导航。它可以包含多个导航项,并提供了许多自定义选项
属性解析
BottomNavigationBar({
super.key,
required this.items,
this.onTap,
this.currentIndex = 0,
this.elevation,
this.type,
Color? fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color? selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme,
this.unselectedIconTheme,
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels,
this.showUnselectedLabels,
this.mouseCursor,
this.enableFeedback,
this.landscapeLayout,
this.useLegacyColorScheme = true,
})
- items (List): 导航栏中的项目列表,每个项目包含图标和标签。
- onTap (ValueChanged?): 当某个导航项被点击时调用的回调函数,传递被点击项的索引。
- currentIndex (int): 当前选中的导航项的索引,默认为 0。
- elevation (double?): 导航栏的阴影高度。
- type (BottomNavigationBarType?): 导航栏的类型,可以是 fixed(固定)或 shifting(移动)。
- fixedColor (Color?): 已弃用,请使用 selectedItemColor 替代。
- backgroundColor (Color?): 导航栏的背景颜色。
- iconSize (double): 导航项图标的大小,默认为 24.0。
- selectedItemColor (Color?): 选中项的颜色。
- unselectedItemColor (Color?): 未选中项的颜色。
- selectedIconTheme (IconThemeData?): 选中项图标的主题样式。
- unselectedIconTheme (IconThemeData?): 未选中项图标的主题样式。
- selectedFontSize (double): 选中项标签的字体大小,默认为 14.0。
- unselectedFontSize (double): 未选中项标签的字体大小,默认为 12.0。
- selectedLabelStyle (TextStyle?): 选中项标签的文本样式。
- unselectedLabelStyle (TextStyle?): 未选中项标签的文本样式。
- showSelectedLabels (bool?): 是否显示选中项的标签。
- showUnselectedLabels (bool?): 是否显示未选中项的标签。
- mouseCursor (MouseCursor?): 鼠标悬停时显示的光标。
- enableFeedback (bool?): 是否启用点击反馈。
- landscapeLayout (BottomNavigationBarLandscapeLayout?): 在横向布局下的样式。
- useLegacyColorScheme (bool): 是否使用旧版颜色方案,默认为 true。
示例
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Text('Home Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Business Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('School Page',
style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
unselectedItemColor: Colors.grey,
onTap: _onItemTapped,
backgroundColor: Colors.blueAccent,
),
);
}
}
Drawer
Drawer 是 Flutter 中用于实现侧边栏菜单的小部件,通常从屏幕的左侧滑出。它允许你在应用中添加导航项、用户信息或其他自定义内容。
属性解析
const Drawer({
super.key,
this.backgroundColor,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.shape,
this.width,
this.child,
this.semanticLabel,
this.clipBehavior,
})
- backgroundColor (Color?): 抽屉的背景颜色。
- elevation (double?): 抽屉的阴影高度。
- shadowColor (Color?): 阴影的颜色。
- surfaceTintColor (Color?): 表面色调颜色。
- shape (ShapeBorder?): 抽屉的形状及边框样式。
- width (double?): 抽屉的宽度。
- child (Widget?): 抽屉的主要内容部分。
- semanticLabel (String?): 用于语义化描述抽屉的标签。
- clipBehavior (Clip?): 设置裁剪行为。
示例
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Example'),
),
drawer: Drawer(
backgroundColor: Colors.white,
elevation: 16.0,
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text("John Doe"),
accountEmail: Text("johndoe@example.com"),
currentAccountPicture: CircleAvatar(
backgroundImage:
NetworkImage("https://via.placeholder.com/150"),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
// Handle the action here
Navigator.pop(context); // Close the drawer
},
),
ListTile(
leading: Icon(Icons.business),
title: Text('Business'),
onTap: () {
// Handle the action here
Navigator.pop(context); // Close the drawer
},
),
ListTile(
leading: Icon(Icons.school),
title: Text('School'),
onTap: () {
// Handle the action here
Navigator.pop(context); // Close the drawer
},
),
],
),
),
body: Center(
child: Text('Content goes here'),
),
);
}
}
TabBar
TabBar 是 Flutter 中用于实现选项卡导航的小部件,它通常与 TabBarView 一起使用,以在应用程序中创建标签页布局。
属性解析
const TabBar({
super.key,
required this.tabs,
this.controller,
this.isScrollable = false,
this.padding,
this.indicatorColor,
this.automaticIndicatorColorAdjustment = true,
this.indicatorWeight = 2.0,
this.indicatorPadding = EdgeInsets.zero,
this.indicator,
this.indicatorSize,
this.dividerColor,
this.dividerHeight,
this.labelColor,
this.labelStyle,
this.labelPadding,
this.unselectedLabelColor,
this.unselectedLabelStyle,
this.dragStartBehavior = DragStartBehavior.start,
this.overlayColor,
this.mouseCursor,
this.enableFeedback,
this.onTap,
this.physics,
this.splashFactory,
this.splashBorderRadius,
this.tabAlignment,
})
- tabs (List): 选项卡列表,每个选项卡通常是一个 Tab 小部件。
- controller (TabController?): 控制选择和动画效果的控制器。
- isScrollable (bool): 如果为 true,则选项卡可以滚动,否则选项卡将均匀分布,默认为 false。
- padding (EdgeInsetsGeometry?): 选项卡周围的填充边距。
- indicatorColor (Color?): 指示器的颜色。
- automaticIndicatorColorAdjustment (bool): 是否自动调整指示器颜色以适应当前主题,默认为 true。
- indicatorWeight (double): 指示器的高度,默认为 2.0。
- indicatorPadding (EdgeInsetsGeometry): 指示器的边距,默认为 EdgeInsets.zero。
- indicator (Decoration?): 自定义指示器的装饰。
- indicatorSize (TabBarIndicatorSize?): 指示器的大小,可以是 tab(匹配选项卡宽度)或 label(匹配标签宽度)。
- dividerColor (Color?): 在选项卡之间绘制的分隔线的颜色。
- dividerHeight (double?): 分隔线的高度。
- labelColor (Color?): 选中项标签的颜色。
- labelStyle (TextStyle?): 选中项标签的文本样式。
- labelPadding (EdgeInsetsGeometry?): 选中项标签的填充边距。
- unselectedLabelColor (Color?): 未选中项标签的颜色。
- unselectedLabelStyle (TextStyle?): 未选中项标签的文本样式。
- dragStartBehavior (DragStartBehavior): 拖动开始行为,默认为 DragStartBehavior.start。
- overlayColor (MaterialStateProperty<Color?>?): 选项卡的覆盖颜色。
- mouseCursor (MouseCursor?): 鼠标悬停时显示的光标。
- enableFeedback (bool?): 是否启用点击反馈。
- onTap (ValueChanged?): 当某个选项卡被点击时调用的回调函数,传递被点击项的索引。
- physics (ScrollPhysics?): 选项卡栏的滚动物理属性。
- splashFactory (InteractiveInkFeatureFactory?): 用于生成水波纹效果的工厂。
- splashBorderRadius (BorderRadiusGeometry?): 水波纹效果的圆角半径。
- tabAlignment (TabAlignment?): 标签对齐方式。
示例
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home), text: "Home"),
Tab(icon: Icon(Icons.business), text: "Business"),
Tab(icon: Icon(Icons.school), text: "School"),
],
labelColor: Colors.amber,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.amber,
),
),
body: TabBarView(
children: [
Center(child: Text('Home Page')),
Center(child: Text('Business Page')),
Center(child: Text('School Page')),
],
),
),
);
}
}
TabBarView
TabBarView 是 Flutter 中用于与 TabBar 配合使用的小部件,用于显示对应于每个选项卡的内容页面
属性解析
const TabBarView({
super.key,
required this.children,
this.controller,
this.physics,
this.dragStartBehavior = DragStartBehavior.start,
this.viewportFraction = 1.0,
this.clipBehavior = Clip.hardEdge,
})
- children (List): 所有选项卡对应的内容页面列表。
- controller (TabController?): 控制选项卡和页面切换的控制器,通常与 TabBar 共用一个控制器。
- physics (ScrollPhysics?): 页面滚动的物理属性,例如是否允许用户滚动以及滚动时的行为。
- dragStartBehavior (DragStartBehavior): 拖动开始行为,默认为 DragStartBehavior.start。
- viewportFraction (double): 每个页面在视口中的占比,默认值为 1.0。
- clipBehavior (Clip): 设置裁剪行为,默认为 Clip.hardEdge。
示例
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home), text: "Home"),
Tab(icon: Icon(Icons.business), text: "Business"),
Tab(icon: Icon(Icons.school), text: "School"),
],
labelColor: Colors.amber,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.amber,
),
),
body: TabBarView(
children: [
Center(child: Text('Home Page')),
Center(child: Text('Business Page')),
Center(child: Text('School Page')),
],
),
),
);
}
}