开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何将AppBar放在状态栏下面？

将AppBar放在状态栏下面可以通过以下步骤实现：

首先，确保你的应用使用了Material Design风格的AppBar。这可以通过在项目的build.gradle文件中添加以下依赖来实现：

implementation 'com.google.android.material:material:1.4.0'

在你的布局文件中，使用CoordinatorLayout作为根布局，并将AppBarLayout和Toolbar放在其中。例如：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- 其他内容布局 -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在你的Activity或Fragment中，设置状态栏透明，并将AppBar与状态栏重叠。例如：

// 设置状态栏透明
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

// 将AppBar与状态栏重叠
AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
params.topMargin = -getStatusBarHeight();
appBarLayout.setLayoutParams(params);

其中，getStatusBarHeight()是一个获取状态栏高度的方法，你可以自行实现。

通过以上步骤，你可以将AppBar放在状态栏下面，实现更加美观的界面效果。

请注意，以上答案中没有提及腾讯云相关产品和产品介绍链接地址，因为该问题与云计算领域的专业知识、编程语言、云计算品牌商等内容无关。如有其他问题，欢迎继续提问。

相关搜索:CSS将图片放在彼此的下面 js引用放在body下面在android默认项目的appbar下面填充在Appbar下面设置Recyclerview 在状态栏下面绘制NavigationView标题，在状态栏后面绘制NavigationView 如何将<li>元素放在汉堡包图标下面？如何将material ui应用程序抽屉放在页眉下面如何将UILabel恰好放在UITableView下面？如何将下面的java查询放在switch case中？如何将列表Grup项目放在"Create Button“下面

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter沉浸式状态栏AppBar导航栏仿咸鱼底部凸起导航栏效果

如下图：状态栏是指android手机顶部显示手机状态信息的位置。 android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titleBar能够和状态栏融为一体，增加沉浸感。...如上图Flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？且继续看下文讲述。 ? ?...在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java，判断一下版本号然后将状态栏颜色修改设置成透明，因为他本身是黑色半透明。...（修改flutter状态栏黑色半透明为全透明） override fun onCreate(savedInstanceState: Bundle?)...到此这篇关于Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果的文章就介绍到这了,更多相关Flutter沉浸式状态栏导航栏仿咸鱼底部凸起导航内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

5.1K4 1

Flutter 组件集录 | 全面认识 AppBar 组件 - 使用篇

Stack 叠放在 AppBar 下方。...部位相关控制属性下面介绍一些关于部位的属性： centerTitle 是一个 bool 值，可以控制 title 是否居中显示。...---- 在 AppBar 的使用过程中，有一个非常重要，可能很少人注意的一点： AppBar 的背景色可以影响顶部状态栏的颜色。...比如默认情况下背景色是蓝色，状态栏是白色：如果背景色是白色，状态栏就会是黑色，这样就很方便。如果不使用 AppBar，也能界面跳着跳着状态栏就错乱了。比如类似下面的情况。...通过源码可以知道 AppBar 中会通过 AnnotatedRegion 维护状态栏的颜色。

1.5K1 1

FlutterComponent最佳实践之沉浸式

状态栏沉浸式再来看看Android。这个状态栏，为什么国内的设计师都想干掉它的颜色呢。...首先，我们来修改状态栏的颜色，Flutter提供了SystemChrome.setSystemUIOverlayStyle来修改状态栏和底部导航栏的样式修改，借助它，我们可以很方便的干掉状态栏的默认颜色...，不过有一点需要注意，那就是statusBarBrightness，如果你后面有用AppBar组件，那么statusBarBrightness需要在AppBar中设置，否则这里的设置会被覆盖而不生效。...AppBar沉浸式下面再来看看AppBar的沉浸式设置，它给我们提供了backgroundColor的设置，我们只需要把默认的elevation干掉即可。...ListView的沉浸式我们把AppBar也干掉，因为有时候我们需要自己来实现AppBar，所以，来看下ListView的沉浸式。

1.5K4 0

Flutter 透明状态栏及字体颜色的设置方法

statusBarIconBrightness为全局设置 ); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); } } 2.单页面设置 appBar...: AppBar( title: new Text(''), elevation: 0, brightness: Brightness.dark, //设置为白色字体 ), 注...：设置AppBar之后，单独在build内设置这行代码会失效 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); ps：下面看下...设置android状态栏为透明的沉浸。...,更多相关Flutter 状态栏字体颜色内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn！

6.5K2 1

Flutter 组件集录 | AppBar 组件 - 从源码中学习

AppBar 状态类中的滑动干了什么下面问题来了，_AppBarState 要监听滑动做什么？在平时的滑动过程中似乎 AppBar 并没有什么和滑动相关的东西。...没用过 MaterialState ，那下面来演示一下。...---- AppBar 的 flexibleSpace 属性，在构建逻辑中会通过 Stack 叠放在整个 appBar 之下。...---- AppBar 状态类构建时的顶层会使用 AnnotatedRegion和 Materal 进行包裹，分别处理 状态栏样式和 Materal 相关的属性。...从中可以学到，如果不想使用 AppBar，我们也可以直接使用 AnnotatedRegion 来控制该界面中的状态栏样式。所以，一个组件的表现效果，都可以在源码的构造在中找到逻辑根源。

1.1K3 0

Material Design 实战之第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间）

就表示该控件会出现在系统状态栏里； 2.2 在程序的主题中将状态栏颜色指定成透明色；在主题中将android:statusBarColor属性的值指定成@android:color...下面编写水果内容详情部分，继续改activity_fruit.xml： .........android.support.design.widget.CoordinatorLayout> 接下来在LinearLayout中放入具体的内容，使用一个TextView来显示水果的内容详情，并将TextView放在一个卡片式布局当中...其中， CardView的marginTop加了35dp的边距，这是为下面要编写的东西留出空间。至此水果标题栏和水果内容详情的界面便编写完了。...另下面这个是卡片水果列表界面的ImageView，id是fruit_image： ?

2.3K4 0

【Flutter 专题】25 易忽略的【小而巧】的技术点汇总(三)

PreferdSize 尺寸 AppBar Flutter 中默认提供了 AppBar 给我们带来了很多便利，但是有需要调整 AppBar 的高度，方式很简单。...在 AppBar 外嵌套一层 PreferdSize 即可设置 AppBar 的高度。...appBar: PreferredSize( child: AppBar( title: Row(children: [ Text('标题栏高度测试-...SafeArea 是否沉浸式状态栏 和尚以前处理过沉浸式状态栏，效果很不错，但是有时也需要保护状态栏，此时需要 SafeArea 配合一下。...通过调整 SafeArea 的 top 的 bool 属性来判断是否保护状态栏，bottom 属性可以在有虚拟返回状态栏的测试机中尝试。

1.1K4 1

Flutter SliverAppBar全解析，你要的效果都在这了！

与AppBar大部分的属性重合，相当于AppBar的加强版。先从最基本的效果开始，一步一步做到全效果。...,//阴影 this.forceElevated = false,//是否显示阴影 this.backgroundColor,//背景颜色 this.brightness,//状态栏主题...图标主题 this.actionsIconTheme,//action图标主题 this.textTheme,//文字主题 this.primary = true,//是否显示在状态栏的下面...,//标题横向间距 this.expandedHeight,//合并的高度，默认是状态栏的高度加AppBar的高度 this.floating = false,//滑动时是否悬浮...childCount: 30, ), ), ], ), ); 这是最最最基本的效果了，但是也简陋的不行，下面开始一步一步改造

2.3K3 0

Flutter完整开发实战详解(八、实用技巧与填坑)

0.0)),，kToolbarHeight 是一个固定数据，当然你可以通过实现 PreferredSizeWidget 去自定义 AppBar。...4、设置状态栏颜色和图标颜色简单的可以通过 AppBar 的 brightness 或者 ThemeData 去设置状态栏颜色。...但是如果你不想用 AppBar ，那么你可以嵌套 AnnotatedRegion 去设置状态栏样式，通过 SystemUiOverlayStyle 就可以快速设置状态栏和底部导航栏的样式...同时你还可以通过 SystemChrome.setSystemUIOverlayStyle 去设置，前提是你没有使用 AppBar 。...需要注意的是，所有状态栏设置是全局的，如果你在 A 页面设置后，B 页面没有手动设置或者使用 AppBar ，那么这个设置将直接呈现在 B 页面。

2.5K2 0

动手编写你的第一个 Flutter 应用

'package:flutter/material.dart'; //main.dart为应用入口dart类，里面void main()方法为入口函数 // 这里是lambda缩略写法，完整写法为下面这种...ThemeData( // 在这里我们可以配置应用全局主题，后面主题课程部分会详细讲解 // // 我们可以通过flutter run命令来运行程序，会看到蓝色状态栏和标题栏...// 通过 primarySwatch属性来配置状态栏和标题栏颜色 primarySwatch: Colors.green, ), // 设置启动页面...、body、bottomNavigationBar、floatingActionButton等 return Scaffold( appBar: AppBar( //...Increment', // 设置图标 child: Icon(Icons.add), ), ); } } 通过 primarySwatch 属性来配置状态栏和标题栏颜色效果如下图

9632 0

Flutter 强大的MediaQuery控件

通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在...padding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏。...viewPadding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏，此值独立于padding和viewInsets，它们的值从MediaQuery控件边界的边缘开始测量。...{ var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0); return Scaffold( appBar...: AppBar( title: Text('老孟'), ), body: MediaQuery( data: _data, child

9050 0

Flutter 强大的MediaQuery控件

通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在...padding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏。...viewPadding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏，此值独立于padding和viewInsets，它们的值从MediaQuery控件边界的边缘开始测量。...{ var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0); return Scaffold( appBar...: AppBar( title: Text('老孟'), ), body: MediaQuery( data: _data, child

7700 0

Flutter深入分析状态栏图标适配

1.前景一个优秀的应用程序，往往各个方面或者UI深得用户的喜爱，状态栏图标也是其中的确定因素之一，当你的AppBar使用着暗色调的颜色，并且状态栏图标又使用着黑色主题的图标时，不得不被用户疯狂吐槽，从而导致用户的留存度下降...，下面，我们来实现状态栏图标的适配，让你们开发的应用增添一下色彩!...SecondPage()))), ], ), ), ); } 4.出现的问题: 使用上面调用的方法需要注意的是，当main_page.dart含有一个自带的AppBar...时，会导致设置不生效，具体的原因，我们可以看下面的另外一种方式设置状态栏图标 3.使用AnnotatedRegion设置 1.什么是AnnotatedRegion?...下面来一个示例当做最后的结尾。 5.滚动列表颜色改变状态栏图标 ?

2.7K2 0

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

AppBar 这一部分，我们只关注 Scaffold 中的 AppBar 剩下的还是埋坑【坑4】( ?...，「**，上面那层半透明的啥玩意，那么丑」，接下来我们来解决这个问题，修改 void main 方法 void main() { runApp(DemoApp()); // 添加如下代码，使状态栏透明...content, style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 30.0))); } } 然后运行下，「**，文字怎么被状态栏给挡了...翻译过来大概就是「给子部件和系统点击无效区域留有足够空间，比如状态栏和系统导航栏」，SafeArea 可以很好解决刘海屏覆盖页面内容的问题，那么到目前为止，AppBar 的一些坑就说的差不多了，就要解决剩下的坑了...drawer: Drawer( // 记得要先添加 `SafeArea` 防止视图顶到状态栏下面 child: SafeArea( child:

1.7K2 0

Android 滑动渐变背景Toolbar、点击置顶ScrollView

"match_parent" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout...android:id="@+id/appbar" android:layout_width="match_parent"...* 可以用来判断是否为Flyme用户 * * @param window 需要设置的窗口 * @param dark 是否把状态栏字体及图标颜色设置为深色...，需要MIUIV6以上 * * @param window 需要设置的窗口 * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return...//滑动偏移监听事件 binding.appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener

1.7K2 0

Flutter开发实战分析-pesto_demo解析

而且而它的body和appBar，一个是需要填充数据的列表，一个是需要动画的appBar。所以是一个StatefulWidget。...pesto.gif 同样，我们也只先实现下面的部分。分析我们发现，界面是由两个重叠的元素形成的。一个是下面的列表，另一个是叠在上面的floattingButton。...所以我们想，让图片整个放在背后，appBar只是一个透明的遮罩！...@override Widget build(BuildContext context) { //得到状态栏高度 final double statusBarHeight = MediaQuery.of...appbar的action放在这里 actions: [ GestureDetector(

2.3K2 0

Flutter之drawer详细分析（你要的操作都有）

: _appbar, drawer: _drawer, ); } get _appbar=>AppBar( title: Text('Drawer Test'),...image.png 可以看到: Container=>限制高度（默认高度+状态栏高度） BoxDecoration=> 底部添加毫无用处的分割线 AnimatedContainer =>动画版的Container...添加默认内边距+顶部状态栏高度的内边距嗯，感觉没错啊，这是怎么肥事，MediaQuery.of(context).padding.top是获取状态栏的高度，然后自身高度加上状态栏的高度，应该是显示蓝色才对...Drawer代码基础上修改_kWidth的值，把它暴露给用户自己去定制，让他能传入一个double类型的宽度百分比，弹出根据屏幕的百分之几的Drawer，该值只允许传入大于0小于1的值，默认为0.7 下面我们将上面的...image.png 当我点击AppBar中左边的按钮是发现，弹出了一个蒙版，Drawer并没有弹出来，这是怎么回事？别急，我们开启一下布局边界 ?

4.1K2 1

Flutter开发中的一些Tips

比如我下面的这个例子：可以看到底部溢出了22个像素，可能在18：9的手机以上不太会出现这种问题，因为屏幕的高度足够。但是这种16：9的手机可能会暴露出来。...因为Android 和 IOS都有状态栏，甚至IOS还有叫做“HomeIndicator”的横条。所以一不留神就会出现适配问题。...以 AppBar源码为例： class _AppBarState extends State { @override Widget build(BuildContext context...Scaffold的 AppBar，AppBar中默认的title在Android中靠左显示，IOS中居中显示。如果需要两个平台效果统一，需要设置在AppBar中主动设置centerTitle属性。...状态栏方面，Android平台默认是半透明的效果，IOS则是透明效果。比如Android要实现IOS的效果，可以设置状态栏为透明。不过IOS要实现Android的效果则不行。。。，难道只能自定义？

2.1K3 0

Android 垃圾分类APP（三）垃圾分类之语音输入

一、新增文字输入页面首先在com.llw.trash下新建一个ui包，后面我们创建的所有Activity都放在这个包下，下面在这个包下创建一个名为TextInputActivity的Activity，...可以看到大致没有什么问题，但是TextInputActivity的状态栏还是之前的那样，这样的用户体验是不好的，因此需要做修改，修改状态栏的背景色，然后是图标改成深色。...下面进入BaseActivity，新增如下方法。...那么这个工具类自然要在VoiceInputActivity中进行配置使用的，下面进入VoiceInputActivity，下面先声明一些变量 private static final String TAG...下面运行一下： ? OK，这样功能就实现了，本文就到这里了。

1.9K2 0

Flutter 布局备忘录 -- 多图警告，干货建议收藏

如下：我们假有下面的布局： Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text...message: "Bottom End", location: BannerLocation.bottomEnd, ), ], ); } 使用自己的部件，你需要将它们放在..., color: Colors.yellow, ), ), 上面的写法等同下面的写法： ConstrainedBox( constraints: BoxConstraints(...下面的代码又一个父部件 Container 来绘制一个 image，然后有一个子部件 Container 来使用 backgroundBlendMode，但是你还是获取到和之前的效果。...SafeArea 在不同的平台，有些特定的区域，比如安卓的状态栏或者 iPhone X 的刘海区块，我们不应该在其下面绘制内容。解决方案是使用 SafeArea 小部件。

2.9K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭