苹果新总部 - Apple Park

Cupertino

Cupertino(库布蒂诺),位于硅谷湾区一座美丽的小城市, Apple Park坐落在这座城市

所以在Flutter中 Cupertino 代表专门为 iOS 风格设计的一系列控件

flutter/lib/cupertino.dart列出了所有可用的iOS控件

快速搭建iOS主界面

CupertinoApp

相当于UIAppDelegate

CupertinoTabScaffold CupertinoTabBar

相当于 UITabBarController

CupertinoThemeData

设置 iOS App 主题

CupertinoPageScaffold CupertinoNavigationBar

相当于 UINavigationController

使用这几个组件就能搭建最基础的iOS风格主界面了

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Cupertino iOS Demo',
      theme: CupertinoThemeData(
      ),
      home: MyHomePage(title: 'Cupertino iOS design style'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  CupertinoTabBar _cupertinoTabBar(){
    return CupertinoTabBar(
      // 点击回调
      onTap: (index){
        debugPrint(index.toString());
      },
      currentIndex: 0, // 设置默认选中位置
      activeColor: Colors.blue, // 图标高亮颜色
      inactiveColor: Colors.grey, // 图标未选中颜色
      iconSize: 25, // 图标大小
      // 边框
      items: [
        _bottomNavigationBarItem(Icons.home, Icons.home_outlined, "首页"),
        _bottomNavigationBarItem(Icons.addchart, Icons.addchart_outlined, "发现"),
        _bottomNavigationBarItem(Icons.alarm, Icons.alarm_outlined, "提醒"),
        _bottomNavigationBarItem(Icons.settings, Icons.settings_outlined, "设置"),
      ],
    );
  }

  BottomNavigationBarItem _bottomNavigationBarItem(IconData iconData, IconData activeIcon, String title){
    return BottomNavigationBarItem(
      icon: Icon(iconData),
      activeIcon: Icon(activeIcon),
      label: title,
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: _cupertinoTabBar(),
      tabBuilder: (context, index){
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: const Text("CupertinoTabBar"),
            leading: CupertinoNavigationBarBackButton(onPressed: () {  },
            ),
            trailing: CupertinoButton(padding: EdgeInsets.zero, onPressed: () { },
              child: const Text("add"),),
          ),
          child: ListView(
            children: [
            ],
          ),
        );
      },
    );
  }
}