點燈坊

失くすものさえない今が強くなるチャンスよ

建立 Cupertino 風格頁面

Sam Xiao's Avatar 2024-09-04

Cupertino 為 iOS 所使用風格，在 Flutter 可以使用 CupertinoApp widget 建立之。

Version

Flutter 3.24

Flutter

cupertino01

  • iOS 成功使用 CupertinoApp 顯示 Hello World

Main

main.dart

import 'package:flutter/cupertino.dart';

import 'home.dart';

void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(home: Home());
  }
}
  • 在 main.dart 啟動 app

Line 1

import 'package:flutter/cupertino.dart';
  • 引用 package:flutter/cupertino.dart 使用 CupertinoApp

Line 12

@override
Widget build(BuildContext context) {
  return const CupertinoApp(home: Home());
}
  • 建立 CupertinoApp widget
    • home：指定首頁

Home

home.dart

import 'package:flutter/cupertino.dart';

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      child: Center(
        child: Text('Hello World'),
      ),
    );
  }
}
  • 定義 Home page

Line 1

import 'package:flutter/cupertino.dart';
  • 每個 page 到要引用 flutter/cupertino.dart 使用 CupertinoApp

Line 6

@override
Widget build(BuildContext context) {
  return const CupertinoPageScaffold(
    child: Center(
      child: Text('Hello World'),
    ),
  );
}
  • 由 CupertinoPageScaffold widget 建立 CupertinoApp 的 頁面結構
    • child：指定 CupertinoPageScaffold 的 內容
  • Center：建立 水平置中 與 垂直置中 的 layout
    • child：指定 Center 的 內容
  • Text：建立 Text widget 顯示內容

Conclusion

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

# Flutter