1. 使用backgroundColor属性 这是最直接的方法,通过AppBar的backgroundColor属性直接设置背景颜色。 dart Scaffold( appBar: AppBar( title: Text('My App'), backgroundColor: Colors.blue, // 设置AppBar的背景颜色 ), body: Center( child: Text('Hello, Flutter!'), ), ); 2. 通过ThemeData全局配置...
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),...
发现在给AppBar 添加 backgroundColor 后,随着页面滑动,AppBar的背景颜色会改变,比如白色的时候会变成浅灰色, 尝试修改成红色时, 颜色也会有变化,个人感觉就像是上面有层遮罩一样, 即使修改了滚动区域的背景颜色, 也还存在这个情况, 最终在主题风格上修改成功了,代码如下: 代码: MaterialApp(theme:ThemeData(appBar...
color: Colors.yellow, opacity:0.5, size:30),//icon的主题样式,默认的颜色是黑色的,不透明为1,size是24textTheme: TextTheme(),//这个主题的参数比较多,flutter定义了13种不同的字体样式centerTitle:true,//标题是否居中,默认为falsetoolbarOpacity:0.5,//整个导航栏的不透明度bottomOpacity:0.8,//bottom的不...
import'dart:io';import'package:flutter/services.dart';voidmain(){if(Platform.isAndroid) {// 设置Appbar上面的电池显示的状态栏的背景与颜色SystemUiOverlayStylesystemUiOverlayStyle=SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);// SystemC...
Flutter AppBar组件中的常见属性: import'package:flutter/material.dart';classAppBardemoPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(backgroundColor:Colors.red,leading:IconButton(icon:Icon(Icons.menu),tooltip:"Search",onPressed:(){print('menu Pressed');...
在Flutter中,可以通过修改AppBar的属性来更改文本的颜色。具体的步骤如下: 创建一个AppBar组件,并将其作为Scaffold的appBar属性值。 代码语言:txt 复制 Scaffold( appBar: AppBar( title: Text('My App'), // 其他属性 ), // 其他组件 ) 在AppBar中,可以使用textTheme属性来更改文本的颜色。textTheme接受一...
Flutter AppBar中自定义TabBar实 现顶部Tab切换 TabBar常见属性: import'package:flutter/material.dart';classAppBarDemoPageextendsStatelessWidget {constAppBarDemoPage({Key key}) :super(key: key); @override Widget build(BuildContext context) {returnDefaultTabController( ...
DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( centerTitle: true, title: const Text("AppBarDemoPage"), leading: IconButton( icon: const Icon(Icons.menu), onPressed: () { print(1244); }, ), actions: [ IconButton( onPressed: () {}, icon: const Icon(Icons.search...
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标),AppBar组件的结构AppBar组件的代码AppBar(leading:Icon(Icons.home),//导航图标title