关于flutter: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. 显示加载指示器

要显示加载指示器，您能够应用 CupertinoActivityIndi​​cator 小部件。这个小部件显示了一个按顺时针方向旋转的 iOS 格调的流动指示器。让咱们应用带有 Text 小部件的 CupertinoActivityIndi​​cator 来显示“期待网络”批示。

步骤

• 第 1 步：在 CupertinoSliverNavigationBar 外部，增加两头参数并调配 Row 小部件。
• 第 2 步：在 Row 小部件中，增加 CupertinoActivityIndi​​cator
• 第 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,),
    ),
  ),
)

输入

你能够在这里找到残缺的源代码。

源代码：https://github.com/pinkeshdar…