Flutter新手求助：如何正确应用Material Design的dp/px等尺寸？

嘿，我刚入门Flutter的时候也踩过这个尺寸适配的坑！让我来帮你捋清楚怎么正确处理Material Design里的dp和Flutter的关系，以及为什么你的AppBar效果和原版不符~

首先得明确一个核心点：Flutter中的默认单位就是逻辑像素，它和Material Design里的dp（密度无关像素）是完全等价的。也就是说，Material Design文档里写的56dp高度，你在Flutter里直接写56就行，不需要额外的转换计算。

那为什么按文档设置后效果不对呢？大概率是你在自定义AppBar的时候，没处理好内部的布局细节（比如padding、元素尺寸），或者没利用好Flutter自带的AppBar组件的默认规范。下面给你具体的解决方案：

1. 优先使用Flutter自带的AppBar组件 #

Flutter的AppBar已经完全遵循Material Design的规格了：

• 默认非滚动状态下高度是56dp
• 自动处理leading图标、标题、actions的间距（左右16dp的padding，图标大小24dp，标题字号20dp等）
• 滚动时会自动调整高度（比如滚动折叠的AppBar高度是48dp）

如果你直接用默认的AppBar，代码大概是这样的：

AppBar(
  backgroundColor: Colors.green,
  leading: Icon(Icons.arrow_back),
  title: Text("Chat"),
  actions: [
    Icon(Icons.search),
    SizedBox(width: 16),
    Icon(Icons.more_vert),
  ],
)

这样出来的效果应该和原版WhatsApp的AppBar基本一致。

2. 自定义AppBar时要严格遵循细节规范 #

如果你需要自定义AppBar（比如用PreferredSizeWidget），一定要注意Material Design的细节：

• 整体高度保持56dp（Size.fromHeight(56.0)）
• 左右内边距设置16dp（EdgeInsets.symmetric(horizontal: 16.0)）
• 图标大小统一24dp
• 标题字号用20dp，字重设为w500

举个符合规范的自定义AppBar例子：

PreferredSizeWidget buildCustomWhatsAppAppBar() {
  return PreferredSize(
    preferredSize: Size.fromHeight(56.0),
    child: Container(
      color: Colors.green.shade700,
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      alignment: Alignment.centerLeft,
      child: Row(
        children: [
          Icon(Icons.arrow_back, size: 24.0, color: Colors.white),
          SizedBox(width: 16.0),
          Text(
            "John Doe",
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w500,
              color: Colors.white,
            ),
          ),
          Spacer(),
          Icon(Icons.videocam, size: 24.0, color: Colors.white),
          SizedBox(width: 24.0),
          Icon(Icons.call, size: 24.0, color: Colors.white),
        ],
      ),
    ),
  );
}

3. 关于px和dp的转换（如果需要） #

如果你偶尔拿到的是px单位的设计稿，需要转换成Flutter的逻辑像素，公式是：
逻辑像素 = px值 / 设备像素比

你可以通过MediaQuery获取当前设备的像素比：

double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double logicalPixel = pxValue / devicePixelRatio;

不过Material Design的官方文档都是用dp，所以这种场景很少见。

4. 用Theme统一配置更省心 #

为了让整个App的AppBar风格保持一致，建议在ThemeData里统一配置AppBar的样式：

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.green.shade700,
      elevation: 0,
      titleTextStyle: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.w500,
        color: Colors.white,
      ),
      iconTheme: IconThemeData(
        size: 24.0,
        color: Colors.white,
      ),
    ),
  ),
  // ...其他配置
)

这样所有的AppBar都会自动套用这个规范，不用重复写样式。

内容的提问来源于stack exchange，提问作者Mohamed Frag