Flutter自定义组件插件apn_widgets的使用

Flutter自定义组件插件apn_widgets的使用

apn_widgets 是一组在 Appnormal 项目中使用的有用组件。这些组件可以帮助开发者更方便地构建应用界面。

可用的组件

以下是一些可用的组件：

• PrimaryButton: 一个简单的按钮，带有 isLoading 标志，可以设置平台感知的加载指示器。
• PlatformButton: 一个简单的平台感知按钮。
• AppbarAction: 一个用于 AppBar 中的简单按钮。
• RefreshableDataList: 带有开箱即用的下拉刷新和无限加载功能的列表。需配合 apn_state 和 apn_http 包一起使用。
• DialogPresenter: 一个继承小部件，放置在你的小部件树的顶部，以轻松处理呈现和排队平台感知对话框。
• PinInput: 一个用于处理 PIN 码输入的容器，通过构建者模式可以完全控制 PIN 输入的设计。
• PlatformAlertDialog: 平台感知对话框组件。
• PlatformPullToRefresh: 列表和网格的平台感知下拉刷新组件。
• SearchBar: 带有清除输入图标的一个简单的搜索栏组件。
• TappableOverlay: 一个平台感知的多功能组件，可以轻松使一个小部件可点击。iOS 原生外观使用按压颜色，Android 原生外观使用 Inkwell。

可用的扩展

以下是一些可用的扩展方法：

• Color.lighten(double fraction): 按给定分数使颜色变亮。
• Color.darken(double fraction): 按给定分数使颜色变暗。
• Iterable.merge(): 合并例如 [[""], [""]] 成为 ["", ""]。
• Iterable.unique(): 清除列表中的重复条目。
• Iterable.separated(Widget widget): 在列表的所有元素之间添加给定的小部件（用于间隔和分隔符）。
• String.ucFirst: 将字符串的第一个字符变成大写。
• DateTime.format(String pattern): Intl DateFormat 的快捷方式。
• DateTime.formatIso(): 将日期时间格式化为接受的 ISO 格式（带时区）。
• DateTime.formatTz(): 获取时区偏移（例如 +0200 或 -0800）。

完整示例代码

以下是使用 apn_widgets 组件的一个完整示例。

import 'package:example/features/animated_popup_page.dart';
import 'package:example/features/buttons_page.dart';
import 'package:example/features/dialogs_page.dart';
import 'package:example/features/lists_page.dart';
import 'package:example/features/pin_page.dart';
import 'package:example/features/placeholders_page.dart';
import 'package:example/features/search_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'APN Widgets',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              child: Text('Buttons'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => ButtonsPage())),
            ),
            TextButton(
              child: Text('Lists'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => ListsPage())),
            ),
            TextButton(
              child: Text('Dialogs'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => DialogsPage())),
            ),
            TextButton(
              child: Text('Placeholders & Loaders'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => PlaceholdersPage())),
            ),
            TextButton(
              child: Text('Search'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => SearchPage())),
            ),
            TextButton(
              child: Text('Pin'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => PinPage())),
            ),
            TextButton(
              child: Text('Animated popup'),
              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => AnimatedPopupPage())),
            )
          ],
        ),
      ),
    );
  }
}