CupertinoApp 建立 Cupertino 風格頁面 | 點燈坊

CupertinoApp 可建立 iOS 風格頁面。

Version

Flutter 3.24

Flutter

• Android 與 iOS 都成功使用 CupertinoApp 顯示 Hello World

CupertinoApp

import 'package:flutter/cupertino.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var navigationBar = const CupertinoNavigationBar(
      middle: Text('CupertinoApp'),
    );

    var body = const Center(
      child: Text('Hello World'),
    );

    return CupertinoPageScaffold(
      navigationBar: navigationBar,
      child: body,
    );
  }
}

Line 1

import 'package:flutter/cupertino.dart';

• 每個 CupertinoApp 到要引用 flutter/cupertino.dart

Line 6

@override
Widget build(BuildContext context) {
  return CupertinoPageScaffold(
    navigationBar: navigationBar,
    child: body,
  );
}

• Scaffold 建立 MaterialApp 的 頁面結構
  • navigationBar：CupertinoApp 的 頂部
  • child：CupertinoApp 的 下半部

Line 8

var navigationBar = const CupertinoNavigationBar(
  middle: Text('CupertinoApp'),
);

• CupertinoNavigationBar：建立 appBar

Line 12

var body = const Center(
  child: Text('Hello World'),
);

• Center：建立 body，其內部 widget 將 垂直水平置中

Conclusion

• 當要建立 Cupertino 風格時，除了使用 CupertinoApp widget 外，還要透過 CupertinoPageScaffold widget 建立 頁面結構