Flutter UI组件插件appkit_ui_elements的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter UI组件插件appkit_ui_elements的使用

特性

appkit_ui_elements 插件提供了完整的组件集（包括一些未包含在 macos_ui 包中的组件）。

资源

使用

要使用 appkit_ui_elements 插件，你可以参考下面的完整示例代码。该示例代码展示了如何创建一个带有侧边栏的 macOS 风格的应用程序。

示例代码

import 'dart:io';

import 'package:appkit_ui_elements/appkit_ui_elements.dart';
import 'package:example/pages/colors_page.dart';
import 'package:example/pages/combo_box_button_page.dart';
import 'package:example/pages/combo_button_page.dart';
import 'package:example/pages/context_menu_page.dart';
import 'package:example/pages/controls_page.dart';
import 'package:example/pages/dialogs_page.dart';
import 'package:example/pages/fields_page.dart';
import 'package:example/pages/group_box_page.dart';
import 'package:example/pages/indicators_page.dart';
import 'package:example/pages/popup_button_page.dart';
import 'package:example/pages/push_button_page.dart';
import 'package:example/pages/resizable_panel_page.dart';
import 'package:example/pages/segmented_controls_page.dart';
import 'package:example/pages/selectors_page.dart';
import 'package:example/pages/sliver_toolbar_page.dart';
import 'package:example/pages/sliders_page.dart';
import 'package:example/pages/tab_view_page.dart';
import 'package:example/pages/toggle_button_page.dart';
import 'package:example/pages/toolbar_page.dart';
import 'package:example/theme.dart';
import 'package:flutter/foundation.dart';
import 'package:provider/provider.dart';

Future<void> _configureMacosWindowUtils() async {
  const config = AppKitWindowUtilsConfig(
      makeTitlebarTransparent: true,
      toolbarStyle: NSWindowToolbarStyle.automatic,
      autoHideToolbarAndMenuBarInFullScreenMode: false,
      enableFullSizeContentView: true,
      hideTitle: true,
      removeMenubarInFullScreenMode: true);
  config.apply();
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  assert(Platform.isMacOS && !kIsWeb,
      'This example is intended to run on macOS desktop only.');
  await _configureMacosWindowUtils();
  await AppKitUiElements.ensureInitialized();
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => AppTheme(),
      builder: (context, child) {
        final appTheme = context.watch<AppTheme>();
        return AppKitMacosApp(
          debugShowCheckedModeBanner: false,
          themeMode: appTheme.mode,
          title: 'AppKit Elements Demo',
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int pageIndex = 0;
  late final searchFieldController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    debugPrint('build');

    return PlatformMenuBar(
      menus: const [],
      child: AppKitWindow(
        endSidebar: AppKitSidebar(
            shownByDefault: false,
            builder: (context, scrollController) {
              return Container();
            },
            minWidth: 150),
        sidebar: AppKitSidebar(
            top: AppKitComboBox(
              placeholder: 'Search...',
              items: const [
                'Push Button',
                'Toggle Button',
                'Combo Button',
                'ComboBox Button',
                'Popup/Pulldown Button',
                'Controls',
                'Indicators',
                'Sliders',
                'Dialogs',
                'Context Menu',
                'Segmented Controls',
                'Tab View',
                'Group Box',
                'Resizable Panel',
                'Toolbar',
                'Sliver Toolbar',
                'Selectors',
                'Colors',
                'Fields',
              ],
              onChanged: (value) {
                if (value.isEmpty) return;
                setState(() {
                  final index = [
                    'Push Button',
                    'Toggle Button',
                    'Combo Button',
                    'ComboBox Button',
                    'Popup/Pulldown Button',
                    'Controls',
                    'Indicators',
                    'Sliders',
                    'Dialogs',
                    'Context Menu',
                    'Segmented Controls',
                    'Tab View',
                    'Group Box',
                    'Resizable Panel',
                    'Toolbar',
                    'Sliver Toolbar',
                    'Selectors',
                    'Colors',
                    'Fields',
                  ].indexOf(value);

                  if (index != -1) {
                    pageIndex = index;
                  }
                });
              },
            ),
            builder: (context, scrollController) {
              return AppKitSidebarItems(
                  scrollController: scrollController,
                  itemSize: AppKitSidebarItemSize.large,
                  items: const [
                    AppKitSidebarItem(
                        label: Text('Buttons'),
                        expandDisclosureItems: true,
                        disclosureItems: [
                          AppKitSidebarItem(label: Text('Push Button')),
                          AppKitSidebarItem(label: Text('Toggle Button')),
                          AppKitSidebarItem(label: Text('Combo Button')),
                          AppKitSidebarItem(label: Text('ComboBox Button')),
                          AppKitSidebarItem(
                              label: Text('Popup/Pulldown Button')),
                        ]),
                    AppKitSidebarItem(
                      label: Text('Controls'),
                    ),
                    AppKitSidebarItem(
                      label: Text('Indicators'),
                    ),
                    AppKitSidebarItem(
                      label: Text('Sliders'),
                    ),
                    AppKitSidebarItem(
                      label: Text('Dialogs'),
                    ),
                    AppKitSidebarItem(
                      label: Text('Context Menu'),
                    ),
                    AppKitSidebarItem(label: Text('Layout'), disclosureItems: [
                      AppKitSidebarItem(
                        label: Text('Segmented Controls'),
                      ),
                      AppKitSidebarItem(
                        label: Text('Tab View'),
                      ),
                      AppKitSidebarItem(
                        label: Text('Group Box'),
                      ),
                      AppKitSidebarItem(label: Text('Resizable Panel')),
                      AppKitSidebarItem(label: Text('Toolbar')),
                      AppKitSidebarItem(label: Text('Sliver Toolbar')),
                    ]),
                    AppKitSidebarItem(label: Text('Selectors')),
                    AppKitSidebarItem(label: Text('Colors')),
                    AppKitSidebarItem(label: Text('Fields')),
                  ],
                  currentIndex: pageIndex,
                  onChanged: (index) {
                    setState(() {
                      pageIndex = index;
                    });
                  });
            },
            minWidth: 200),
        child: [
          const PushButtonPage(),
          const ToggleButtonPage(),
          const ComboButtonPage(),
          const ComboBoxButtonPage(),
          const PopupButtonPage(),
          const ControlsPage(),
          const IndicatorsPage(),
          const SlidersPage(),
          const DialogsViewPage(),
          const ContextMenuPage(),
          const SegmentedControlsPage(),
          const TabViewPage(),
          const GroupedBoxPage(),
          const ResizablePanelPage(),
          const ToolbarPage(),
          const SliverToolbarPage(),
          const SelectorsPage(),
          const ColorsPage(),
          const FieldsPage(),
        ][pageIndex],
      ),
    );
  }
}

更多关于Flutter UI组件插件appkit_ui_elements的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter UI组件插件appkit_ui_elements的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用Flutter UI组件插件appkit_ui_elements的代码案例。假设你已经在pubspec.yaml文件中添加了该依赖并运行了flutter pub get来安装它。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  appkit_ui_elements: ^最新版本号  # 请替换为实际可用的最新版本号

然后，在你的Flutter应用中，你可以按照以下方式使用appkit_ui_elements插件提供的UI组件。以下是一个简单的示例，展示了如何使用一些常见的UI组件。

import 'package:flutter/material.dart';
import 'package:appkit_ui_elements/appkit_ui_elements.dart';  // 导入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppKit UI Elements Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _buttonText = "Click Me";

  void _onButtonClick() {
    setState(() {
      _buttonText = "You Clicked Me!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppKit UI Elements Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用AppKitButton
            AppKitButton(
              text: _buttonText,
              onPressed: _onButtonClick,
              buttonColor: Colors.blue,
              textColor: Colors.white,
              borderRadius: 20.0,
            ),
            SizedBox(height: 20.0),

            // 使用AppKitTextField
            AppKitTextField(
              hintText: 'Enter your name',
              borderColor: Colors.grey,
              borderRadius: 10.0,
              onChanged: (value) {
                // 在这里处理文本变化
                print('Text changed to: $value');
              },
            ),
            SizedBox(height: 20.0),

            // 使用AppKitCheckbox
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                AppKitCheckbox(
                  value: true,
                  onChanged: (newValue) {
                    // 在这里处理复选框变化
                    print('Checkbox value: $newValue');
                  },
                ),
                Text('Accept Terms and Conditions'),
              ],
            ),
            SizedBox(height: 20.0),

            // 使用AppKitRadioGroup
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                AppKitRadio(
                  value: 'option1',
                  groupValue: 'option1',
                  onChanged: (newValue) {
                    // 在这里处理单选按钮变化
                    print('Radio selected: $newValue');
                  },
                ),
                Text('Option 1'),
                SizedBox(width: 20.0),
                AppKitRadio(
                  value: 'option2',
                  groupValue: 'option1',
                  onChanged: (newValue) {
                    // 在这里处理单选按钮变化
                    print('Radio selected: $newValue');
                  },
                ),
                Text('Option 2'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们使用了AppKitButton、AppKitTextField、AppKitCheckbox和AppKitRadio等组件。这些组件的样式和功能由appkit_ui_elements插件提供，可以根据需要进行自定义。

请注意，实际使用时，appkit_ui_elements插件中的组件名称和属性可能会有所不同，具体请参考该插件的官方文档或源代码以获取最新和最准确的信息。

回到顶部