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

最新推荐文章于 2024-04-09 21:58:42 发布

原创

最新推荐文章于 2024-04-09 21:58:42 发布 · 508 阅读

1 ·

CC 4.0 BY-SA版权

本文是Flutter入门系列的教程，详细介绍了如何使用AppBar、Scaffold构建界面，包括去除AppBar的半透明层，使用PopupMenuButton，结合PageView与TabBar切换界面，以及处理SafeArea和Drawer。同时，文章提到了CheckBox、CheckboxListTile、Switch和SwitchListTile等基础部件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

码个蛋(codeegg)第 581 次推文

Flutter系列文章:

《Flutter 入门指北(Part 1)之 Dart》

《Flutter 入门指北(Part 2)之基础部件》

上一篇讲完 Flutter 中的一些基本部件，这篇就先填完上篇留下的没写的 AppBar 的坑，以及 Scaffold 其他参数的使用，在开始前，先补一张缩略版的脑图

完整版脑图，后台回复 “Flutter” 关键字,关注码个蛋(codeegg)会持续更新本系列文章.

AppBar

这一部分，我们只关注 Scaffold 中的 AppBar 剩下的还是埋坑【坑4】(，居然已经埋了那么多坑了，坑虽多，代码还是要继续的)，因为稍后会用到 StatefulWidget 的属性，所以就直接先使用了，和 StatelessWidget 区别用法可以这么记需要数据更新的界面用 StatefulWidget，当然也不是绝对的，就是之前留的【坑1】所说的状态管理

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}


class _HomePageState extends State<HomePage> {
  List<String> _abs = ['A', 'B', 'S'];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true, // 标题内容居中
        automaticallyImplyLeading: false, // 不使用默认
        leading: Icon(Icons.menu, color: Colors.red, size: 30.0), // 左侧按钮
        flexibleSpace: Image.asset('images/app_bar_hor.jpg', fit: BoxFit.cover), // 背景
        title: Text('AppBar Demo', style: TextStyle(color: Colors.red)), // 标题内容
        // 末尾的操作按钮列表
        actions: <Widget>[
          PopupMenuButton(
              onSelected: (val) => print('Selected item is $val'),
              icon: Icon(Icons.more_vert, color: Colors.red),
              itemBuilder: (context) =>
                  List.generate(_abs.length, (index) => PopupMenuItem(value: _abs[index], child: Text(_abs[index]))))
        ],
      ),
    );
  }
}

最后的效果图，未点击右侧按钮如左侧所示，点击右侧按钮会弹出相应的 mune

该部分代码查看 app_bar_main.dart 文件

看到效果图，相信很多小伙伴会吐槽，「**，上面那层半透明的啥玩意，那么丑」，接下来我们来解决这个问题，修改 void main 方法

void main() {
  runApp(DemoApp());


  // 添加如下代码，使状态栏透明
  if (Platform.isAndroid) {
    var style = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(style);
  }
}

关闭后重新运行，就可以看到那层丑丑的「半透明蒙层」没有了

接着介绍下 PopupMenuButton 这个部件，还是按照惯例看构造函数

// itemBuilder
typedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext context);
// onSelected
typedef PopupMenuItemSelected<T> = void Function(T value);


const PopupMenuButton({
    Key key,
    @required this.itemBuilder, // 用于定义 menu 列表，需要传入 List<PopupMenuEntry<T>>
    this.initialValue, // 初始值，是个泛型 T，也就是类型和你传入的值有关
    this.onSelected, // 选中 item 的回调函数，返回 T value，例如选中 `s` 则返回 s
    this.onCanceled, // 未选择任何 menu，直接