Flutter AppBar、BottomNavigationBar及状态栏的高度；屏幕宽高

最新推荐文章于 2024-09-06 15:48:42 发布

小蜜蜂嗡嗡

最新推荐文章于 2024-09-06 15:48:42 发布

阅读量8.3k

点赞数 2

文章标签： flutter android android studio

本文链接：https://blog.csdn.net/androidhyf/article/details/122230245

版权

本文介绍了如何在Flutter中调整AppBar和BottomNavigationBar的高度，遵循Material设计规范，同时讨论了状态栏高度的获取方法。还展示了如何动态设置AppBar的高度，以适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

1.AppBar、BottomNavigationBar 高度
flutter插件包位置:/flutter/src/material/constans.dart 中代码

///  * [kMinInteractiveDimensionCupertino]
///  * The Material spec on touch targets at <https://material.io/design/usability/accessibility.html#layout-typography>.
const double kMinInteractiveDimension = 48.0;
 
/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;
 
/// The height of the bottom navigation bar.
const double kBottomNavigationBarHeight = 56.0;

2.状态栏高度
导入：import 'dart:ui';

MediaQueryData.fromWindow(window).padding.top

3.屏幕宽高

MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

Material 设计规范中状态栏、导航栏、ListTile高度分别为 24、56、56

4.动态设置appbar高度

Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(MediaQuery.of(context).size.height * 0.07),
        child: Offstage(
          child: appbar('修改高度的AppBar', context,
              elevation: 0,
              backcolor: Colors.white,
              titleColor: ColorConfig.black,
              brigthess: Brightness.light),
          offstage: false,
        ),
      ),
      body: _body(),
    )