Flutter UI组件库插件uikit_flutter的使用

本包提供了一个统一的界面工具包和样式指南，用于Flutter项目。除了主题和加载器管理外，该包还包含一些有用的自定义标准小部件。

功能

该包包含以下内容：

• 轻量和暗色主题管理及偏好保存

该包提供了在暗色或亮色主题下的颜色和样式的定义。它还包括一个 ThemeProvider 来管理切换主题并在 SharedPreferences 中存储偏好设置。要实现此主题管理，必须在宿主项目的 main.dart 文件中进行相应的添加。具体参考“使用”部分。

此外，该包还提供了以下小部件：

• DropdownSelector
• Loader
• ShadowBox
• ShadowBoxWithTitle
• SearchBar
• Accordion
• ExpandableText
• PageSkeleton
• ExpandableFloatingContainer
• TimePicker

使用

根据您的需求检查使用部分。
注意： 对于每种情况，都有不同的文件需要导入到您的项目中！通过IDE获取帮助。

主题管理

该包实现了一个简单的主题管理，包括亮色和暗色主题的定义，以及在本地内存中保存用户偏好。

要在应用程序中添加主题管理，请修改 main.dart 文件中的 build 方法如下：

return ThemeProviderBuilder(
    builder: (context, themeProvider) => MaterialApp(
            [...]
            themeMode: themeProvider.themeMode,
            theme: themeProvider.lightTheme,
            darkTheme: themeProvider.darkTheme,
            [...]
        ),
    loadingWidget: const Scaffold(), // 可选，指定在ThemeProvider加载时显示的内容
);

允许用户更改主题，可以简单地使用以下方法：

final themeProvider = Provider.of<ThemeProvider>(context);
themeProvider.setTheme(ThemeMode.light);

这也将用户的选择保存到 SharedPreferences 并在下次启动应用时恢复。

加载器

该包包含一个简单的 LoaderHelper，用于在页面顶部显示加载器，它是一个位于模糊背景上的居中GIF动画。初始化后，可以在应用程序中的任何位置使用加载器。

在使用之前，必须调用以下方法来初始化 LoaderHelper：

LoaderHelper.shared.init(
    context,
    loaderWidget: Image.asset('assets/loader.gif',
          height: 70,
          width: 70,
          color: Colors.white), // 可选，默认为双环旋转GIF
    barrierColor: Colors.black54, // 可选，默认为showDialog的屏障颜色
);

传递的 context 应该是应用的最深 BuildContext。

注意

• 如果不调用此方法，则 LoaderHelper 的其他方法将不起作用（不会抛出错误）。
• 如果传递了与根 BuildContext 不同的上下文，可能会在调试时抛出错误。

为了避免错误，在根小部件中调用 init 方法，即在 MaterialApp 或 CupertinoApp 之后，或在“home”属性中。

如果您使用了 router，例如 MaterialApp.router，请在 RouterDelegate 中使用根 Navigator 小部件的 BuildContext。

提示 如果您使用了 route_manager 包，可以通过调用以下方法来获取根上下文：

BuildContext? context = RouteManager.of(context).navigatorContext;

请注意，这是一个可选值，需要在使用前进行空值检查。

初始化后，可以通过以下方法使用加载器：

LoaderHelper.shared.show(scheduler: false);
LoaderHelper.shared.hide(scheduler: false);

如果 scheduler 属性为 true，则 showDialog 和 Navigator.pop(context) 方法将在 build 方法之后用于显示/隐藏加载器。

搜索栏

一个带有方法来知道输入文本是否已更改的简单搜索栏。它支持暗色和亮色模式管理。

使用此小部件非常简单，如以下示例所示：

SearchBar(
    onChangeText: (value) {
        print(value);
        [...]
    },
)

阴影框

具有圆角和阴影的容器。

ShadowBox(
    removeMargin: false,
    child: [...],
),

带标题的阴影框

一个带圆角、阴影和顶部居中标题的容器。此外，还有启用展开/折叠动作的属性，以及定义默认小部件状态（展开/折叠）的属性。

ShadowBoxWithTitle(
    title: "Hello",
    removeMargin: false,
    removeInnerPadding: true,
    shouldAllowHiding: false,
    isWarning: false,
    initiallyShowChild: true,
    child: [...],
)

下拉选择器

一个类似于下拉菜单的小部件，允许仅查看模式、单选和多选模式等更多功能。

DropdownSelector<int>(
    selectedItems: null,
    selectedItemLabel: "Select",
    onSelectItem: (item) => print(item),
    itemOverviewIconBuilder; (item) => Icon(Icons.favorite), // 可选
    onSelectItemOverview: (item) => print(item),
    items: () async => [0,1,2,3],
    allowMultiselection: false,
    filter: null,
    labelItemBuilder: (item) => item.toString(),
    enabled: true,
    child: null,
    searchBoxSize: null,
)

手风琴

一个具有标题和展开时显示的 Widget 的手风琴小部件。手风琴默认是折叠的。

Accordion(
    title: "Tap to expand",
    child: Text("Hello world"),
);

可扩展文本

可以展开显示更多行的多行文本。

ExpandableText(
    textSpan: TextSpan(
        text:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
    maxLines: 1,
);

可展开浮动容器

一个易于使用的可定制浮动容器。

ExpandableFloatingContainer(
    icon: (isExpanded) => Icon(isExpanded ? Icons.tv_off : Icons.tv),
    title: Text("Example Title"),
    backgroundColor: Colors.white,
    child: SizedBox(
        height: 300,
        child: Container(
            color: Colors.red
        )   
    )
);

时间选择器

基本的时间选择器，具有滚动小时、滚动分钟和关闭按钮。

TimePicker(
    hoursSemanticLabel: "Selettore ore",      // 小时选择器的语义标签 - 必须
    minutesSemanticLabel: "Selettore minuti", // 分钟选择器的语义标签 - 必须
    onTimeSelected: (Datetime : time){
        // 回调，返回所选时间 - 必须 
    },
    roundBorder : true,            // 圆角边框       - 可选，默认为false
    maxWidth: 180,                 // 宽度           - 可选，默认为180
    maxHeight: 200,                // 高度           - 可选，默认为200
    colorBackground: Colors.grey,  // 背景颜色       - 可选，默认为透明
    style = TextStyle(...),         // 非选中数字样式 - 可选，默认为TextStyle(color: black, fontsize: 12, fontWeight: FontWeight.normal)
    selectedStyle = TextStyle(...), // 选中数字样式   - 可选，默认为TextStyle(color: black, fontsize: 16, fontWeight: FontWeight.bold)
    initialTime: DateTime(...),    // 初始时间       - 可选，默认为系统时间
    hoursOffAxisFraction: -1.0,    // 小时轮盘边缘倾斜度 - 可选，默认为-1.0
    minutesOffAxisFraction: 1.0,   // 分钟轮盘边缘倾斜度 - 可选，默认为1.0
    diameterRatio: 1.1,            // 小部件高度与轮盘直径的比例 - 可选，默认为1.1，
    itemExtent = 25.0,             // 每个轮盘元素占据的空间 - 可选，默认为25.0
    selectedAtStart: false,        // 如果为真，则在初始化时调用onTimeSelected - 可选，默认为false
    debouncingWindow: Duration(...), // 在轮盘被操作时，防止短时间内多次调用onTimeSelected的时间窗口 - 可选，默认为300毫秒
    separatorPadding: 0.0,         // 分隔符周围的填充 - 可选，默认为0.0
),