Flutter Cupertino 教程：如何构建外观和感觉原生的 iOS 应用-六虎

一切前端运用程序都运用某种设计体系来帮助用户更轻松地完成任务。他们可能会运用内部开发的定制设计体系或老练的设计体系，例如 Material Design 或 Cupertino (iOS)。

Material Design 由 Google 开发，可用于开发 Android、iOS、Web 和桌面运用程序。

Cupertino 由 Apple 开发。它根据 Apple 的人机界面攻略，该攻略完成了当时的 iOS 设计言语。

Flutter SDK 顺便 Material 和 Cupertino 小部件库，用于开发一个外观和感觉都适用于任一平台的运用程序。

你仍然能够只是运用Material widgets库来构建一个运用程序。但是，假如你想树立一个看起来像规范iOS风格的运用程序，你应该强烈考虑运用Cupertino库。

在本教程中，咱们将构建一个底部有三个选项卡的简略运用程序；通话、聊天和设置。

在通话标签上，咱们将增加简略的导航栏；聊天标签将显现会员列表，并答应终究用户查找任何会员；在设置标签上，咱们将运用各种Cupertino风格的部件来树立设置页面。

这是终究运用程序的外观：

1.创立一个简略的页面

让咱们先创立一个简略的页面，在顶部显现页面标题，在中间显现 “Hello “信息。要树立这样一个页面，你必须删除新创立的项目的一切内容，用下面的代码替代它：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'simple_page.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]).then((value) => runApp(MyApp()));
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 1 <-- SEE HERE
    return CupertinoApp(
      // 2 <-- SEE HERE
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: CupertinoSimpleHomePage(),
    );
  }
}
class CupertinoSimpleHomePage extends StatefulWidget {
  const CupertinoSimpleHomePage({Key? key}) : super(key: key);
  @override
  _CupertinoSimpleHomePageState createState() =>
      _CupertinoSimpleHomePageState();
}
class _CupertinoSimpleHomePageState extends State<CupertinoSimpleHomePage> {
  @override
  Widget build(BuildContext context) {
    // 3 <-- SEE HERE
    return const CupertinoPageScaffold(
      // 4 <-- SEE HERE
      navigationBar: CupertinoNavigationBar(
        middle: Text('Chat App'),
      ),
      child: Center(
        child: Text('Hi'),
      ),
    );
  }
}

代码阐明：

CupertinoApp：CupertinoApp小组件答应你增加小组件，这些小组件首要用于树立一个iOS风格的运用程序。
CupertinoThemeData：运用此小部件，您能够指定运用的款式
CupertinoPageScaffold：CupertinoPageScaffold 有助于构建页面的布局，例如增加导航栏
CupertinoNavigationBar：这个小部件创立一个看起来像原生 iOS 风格的导航栏。

输出

2.增加tabs

这些选项卡用于支持运用程序的首要导航。让咱们在底部增加三个选项卡，每个选项卡都有不同的称号和图标。要创立标签，咱们必须将 CupertinoPageScaffold 替换为 CupertinoTabScaffold。

// 1 <-- SEE HERE
return CupertinoTabScaffold(
  // 2 <-- SEE HERE
  tabBar: CupertinoTabBar(
    currentIndex: 1,
    items: const <BottomNavigationBarItem>[
      // 3 <-- SEE HERE
      BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.phone), label: 'Calls'),
      BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.chat_bubble_2), label: 'Chats'),
      BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.settings), label: 'Settings'),
    ],
  ),
  tabBuilder: (context, index) {
    late final CupertinoTabView returnValue;
    switch (index) {
      case 0:
        // 4 <-- SEE HERE
        returnValue = CupertinoTabView(builder: (context) {
          return const CupertinoPageScaffold(
              navigationBar: CupertinoNavigationBar(
                middle: Text('Calls'),
              ),
              child: Center(child: Text('Calls')));
        });
        break;
      case 1:
        returnValue = CupertinoTabView(
          builder: (context) {
            return CupertinoChatPage();
          },
        );
        break;
      case 2:
        returnValue = CupertinoTabView(
          builder: (context) {
            return CupertinoSettingsPage();
          },
        );
        break;
    }
    return returnValue;
  },
);

CupertinoTabScaffold: CupertinoTabScaffold小组件包括参数，如 tabBar 和tabBuilder，答应你创立tab bar项目和tab bar视图。
CupertinoTabBar：CupertinoTabBar 小部件在屏幕底部增加标签栏。它运用名为 BottomNavigationBarItem 的小部件显现多个项目。 currentIndex 特点答应您控制运用程序发动时的活动选项卡
BottomNavigationBarItem: 这个小组件在标签栏上显现了一个item。它包括有用的参数，如图标、标签和布景颜色来树立一个item。
CupertinoTabView：CupertinoTabView 小部件担任为选定选项卡填充内容。每个 CupertinoTabView 都有自己的导航堆栈。

输出

3.增加翻滚时躲藏的 NavigationBar

在前面的过程中，咱们现已构建了一个基本设置，咱们能够在此基础上开端增加更多小部件。

在当时示例中，当向下翻滚列表时，基本导航栏一直坐落顶部。咱们能够通过在用户开端翻滚时躲藏导航栏来改进用户体会。

过程

第 1 步：在 CupertinoTabView 内部，回来 CustomScrollView
第 2 步：在 CustomScrollView 中，增加 CupertinoSliverNavigationBar 小部件。此小部件在翻滚时躲藏导航栏。
第 3 步：在 CupertinoSliverNavigationBar 内部，增加 largeTitle 参数以显现导航标题。

代码

CupertinoTabView(
  builder: (context) {
    return CustomScrollView(
      slivers: <Widget>[
        CupertinoSliverNavigationBar(
          largeTitle: Text('Chats'),
        ),
      ],
    );
  },
);

输出

4.显现加载指示器

要显现加载指示器，您能够运用 CupertinoActivityIndicator 小部件。这个小部件显现了一个按顺时针方向旋转的 iOS 风格的活动指示器。让咱们运用带有 Text 小部件的 CupertinoActivityIndicator 来显现“等候网络”指示。

过程

第 1 步：在 CupertinoSliverNavigationBar 内部，增加中间参数并分配 Row 小部件。
第 2 步：在 Row 小部件中，增加 CupertinoActivityIndicator
第 3 步：再增加一个小部件（即 Text 小部件）

代码：

CupertinoSliverNavigationBar(
  largeTitle: Text('Chats'),
  leading: Text(
    'Edit',
    style: TextStyle(color: CupertinoColors.link),
  ),
  middle: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      CupertinoActivityIndicator(),
      SizedBox(width: 8),
      Text('Waiting for network')
    ],
  ),
)

输出

5.发动查找

让咱们用一些用户填充“聊天”选项卡并完成查找功能。

为此，咱们将：

创立 users 模型类
用它来填充一些用户数据
运用自定义 list tile小部件显现
运用 CupertinoSearchTextField 小部件启用查找

过程：

过程 1：创立用户列表。

const List<User> users = const <User>[
  const User('Jack', Colors.greenAccent),
  const User('Lucy', Colors.green),
  const User('Luna', Colors.black26),
  const User('Oliver', Colors.blue),
  const User('Lily', Colors.amberAccent),
  const User('Milo', Colors.purple),
  const User('Max', Colors.pink),
  const User('Kitty', Colors.yellowAccent),
  const User('Simba', Colors.red),
  const User('Zoe', Colors.blueAccent),
  const User('Jasper', Colors.deepOrange),
  const User('Stella', Colors.cyan),
  const User('Lola', Colors.lightBlue),
  const User('Halsey', Colors.deepPurpleAccent),
  const User('Taylor', Colors.indigoAccent),
];

第2步：将一切用户复制到 filteredUsers 中。

List<User> _filteredUsers = users;

第 3 步：增加 SliverGrid 小部件并运用filteredUsers在任何可翻滚视图中显现用户列表。

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 1,
    childAspectRatio: 5,
  ),
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return UserTile(_filteredUsers[index]);
    },
    childCount: _filteredUsers.length,
  ),
)

第 4 步：在 CupertinoSliverNavigationBar 下方，增加带有 FractionallySizedBox 和 ClipRect 的 SliverToBoxAdapter 小部件。

第 5 步：将 CupertinoSearchTextField 小部件增加为子小部件。 CupertinoSearchTextField 小部件类似于普通的 Textfield 小部件，但还模仿了 iOS 款式的外观和行为。

SliverToBoxAdapter(
  child: FractionallySizedBox(
    widthFactor: 0.9,
    child: ClipRect(
        child: Padding(
      padding: const EdgeInsets.only(top: 16),
      child: CupertinoSearchTextField(
        controller: _controller,
        onChanged: (value) {
          _updateUserList(value);
        },
        onSubmitted: (value) {
          _updateUserList(value);
        },
        onSuffixTap: () {
          _updateUserList('');
        },
      ),
    )),
  ),
)

第 6 步：增加 _updateUsersList() 办法以查找与查找词匹配的用户。

void _updateUserList(String value) {
  debugPrint('$value');
  if (value.length > 0) {
    _filteredUsers = _filteredUsers
        .where((element) =>
            element.name.toLowerCase().contains(value.toLowerCase()))
        .toList();
  } else {
    _controller.text = '';
    _filteredUsers = users;
  }
  setState(() {});
}

输出

6.增加开关switch

运用 CupertinoSwitch 小部件，您能够在运用程序中创立 iOS 款式开关。让咱们在“设置”选项卡中增加 CupertinoSwitch 小部件。

代码

CupertinoFormSection(
  header: Text('Account Details'),
  children: [
    CupertinoFormRow(
      prefix: Text('Chat Backup'),
      child: CupertinoSwitch(
        value: chatBackup,
        onChanged: (value) {
          setState(() {
            chatBackup = !chatBackup;
          });
        },
      ),
    ),
  ],
),

输出

7.显现ActionSheet

要显现 ActionSheet，您能够运用 CupertinoActionSheet 小部件。此小部件用于答运用户在多个条目之间进行挑选。

过程：

第 1 步：增加 CupertinoButton 小部件。
第 2 步：在 onPressed 办法中，调用 showCupertinoModalPopup。
第 3 步：在 showCupertinoModalPopup 的构建器中，回来 CupertinoActionSheet。
第 4 步：在 CupertinoActionSheet 中，运用 CupertinoActionSheetAction 小部件回来一些操作。

代码

Center(
  child: CupertinoButton(
    onPressed: () {
      showCupertinoModalPopup<void>(
        context: context,
        builder: (BuildContext context) => CupertinoActionSheet(
          title: const Text('Set Wallpaper Theme'),
          actions: <CupertinoActionSheetAction>[
            CupertinoActionSheetAction(
              child: const Text('Dark'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            CupertinoActionSheetAction(
              child: const Text('Light'),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      );
    },
    child: const Text('Chat Wallpaper'),
  ),
)

输出

8.显现AlertDialog

要显现 AlertDialog，您能够运用 CupertinoAlertDialog 小部件。 CupertinoAlertDialog 小部件用于承认用户的操作——例如，在删除帐户时。

过程：

第 1 步：增加 CupertinoButton 小部件。
第 2 步：在 onPressed 办法中，调用 showCupertinoDialog。
第 3 步：在 showCupertinoDialog 的构建器中回来 CupertinoAlertDialog。
第 4 步：在 CupertinoAlertDialog 中，运用 CupertinoDialogAction 小部件回来一些操作。

代码：

Center(
  child: CupertinoButton(
    onPressed: () {
      showCupertinoDialog<void>(
        context: context,
        builder: (BuildContext context) => CupertinoAlertDialog(
          title: const Text('Delete chat'),
          content: const Text('Proceed with deleting chat?'),
          actions: <CupertinoDialogAction>[
            CupertinoDialogAction(
              child: const Text('No'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            CupertinoDialogAction(
              child: const Text('Yes'),
              isDestructiveAction: true,
              onPressed: () {
                // Do something destructive.
              },
            )
          ],
        ),
      );
    },
    child: const Text('Delete all chat'),
  ),
)

输出

9.增加 CupertinoDatePicker

CupertinoDatePicker 小组件答运用户以规范的iOS风格挑选日期。

过程：

第 1 步：增加 CupertinoButton 小部件。
第 2 步：在 onPressed 办法中，调用 _showDialog。
第 3 步：回来带有一些有用参数的 CupertinoDatePicker 小部件，例如 initialDateTime、mode 和 use24hFormat。
第 4 步：增加 onDateTimeChanged 特点并运用新日期rebuild小部件。

代码

Center(
  child: CupertinoButton(
    // Display a CupertinoDatePicker in date picker mode.
    onPressed: () => _showDialog(
      CupertinoDatePicker(
        backgroundColor: CupertinoColors.white,
        initialDateTime: date,
        mode: CupertinoDatePickerMode.date,
        use24hFormat: true,
        // This is called when the user changes the date.
        onDateTimeChanged: (DateTime newDate) {
          setState(() => date = newDate);
        },
      ),
    ),
    // In this example, the date value is formatted manually. You can use intl package
    // to format the value based on user's locale settings.
    child: Text(
      '${date.month}-${date.day}-${date.year}',
      style: const TextStyle(
        fontSize: 22.0,
      ),
    ),
  ),
)

输出

你能够在这里找到完整的源代码。

翻译自blog.logrocket.com，作者：Pinkesh Darji

Flutter Cupertino 教程：如何构建外观和感觉原生的 iOS 应用

1.创立一个简略的页面

2.增加tabs

3.增加翻滚时躲藏的 NavigationBar

4.显现加载指示器

5.发动查找

6.增加开关switch

7.显现ActionSheet

8.显现AlertDialog

9.增加 CupertinoDatePicker

相关文章

下一代工具链「GitHub 热点速览 v.22.43」

Webpack Bundle Analyzer包分析器

ByteHouse：基于ClickHouse的实时数仓能力升级解读

【建议收藏&干货】大前端(环境&软件)装机备忘录-效率篇

作者信息