flutter 顶部

### 创建顶部布局或使用顶部组件

在 Flutter 中，可以通过多种方式来创建位于屏幕顶部的布局或放置特定于顶部位置的组件。通常情况下，`AppBar` 组件被广泛应用于作为页面顶部栏，它不仅提供了简洁的方式定义应用栏还集成了导航图标、标题以及动作按钮等功能[^1]。

如果开发者有自定义需求，则可以利用 `Container`, `Padding`, 或者其他容器类 widget 结合属性如 `alignment` 来精确定位子部件的位置；对于更加复杂的场景下也可以考虑采用 `Stack` 和 `Positioned` 的组合方案来自由调整层叠顺序与相对坐标系内的偏移量[^2]。

下面是一个简单的例子展示如何通过 `Scaffold` 配置带有默认样式 `AppBar` 的界面：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( // 这里设置了顶部的应用栏
          title: Text('Top Layout Example'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

当需要更灵活控制时，可替换为自定义设计的头部区域而不必局限于标准形式的工具条。此时应确保整体视觉效果和谐统一并遵循 Material Design 指南中的建议尺寸和间距参数。