Flutter功能集合插件atomsbox的使用

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

Flutter功能集合插件atomsbox的使用

atomsbox 是一个精心策划的库，包含了一系列预设样式的可重用 Flutter 小部件，这些小部件基于原子设计原则组织，以帮助构建大规模的应用程序。

快速入门

要使用 atomsbox 中的任何预设组件，请按照以下步骤操作：

  1. 在 pubspec.yaml 文件中添加 atomsbox 包的最新版本：
dependencies:
  atomsbox: <latest_version>
  1. 导入包并使用库中的预定义主题：
import 'package:atomsbox/atomsbox.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.theme,
      darkTheme: AppTheme.darkTheme,
      themeMode: currentMode,
      home: const HomeScreen(),
    );
  }
}

使用示例

以下是使用 atomsbox 组件在 Flutter 应用程序中的三个示例。更多组件可以在 atomsbox.com 的组件画廊中找到！

创建一个预设的 AppCardImageAndContentBlock 组件

AppCardImageAndContentBlock(
  margin: const EdgeInsets.only(bottom: AppConstants.sm),
  headline: AppText('这是一张卡片'),
  subhead: sampleText,
  actions: [
    AppFilledButton(
        onPressed: () {}, child: AppText('操作1')),
    AppFilledButton.gradient(
        onPressed: () {}, child: AppText('操作2')),
  ],
),

atomsbox 预设卡片

创建一个预设的 AppForm 组件

AppForm(
  title: AppText('这是一个表单'),
  description: AppText('这是表单描述'),
  formButton: AppFilledButton(
    onPressed: () {},
    child: AppText('提交'),
  ),
  formItemNames: const ['一', '二', '三'],
  formItems: [
    AppTextFormField(),
    AppTextFormField(),
    AppTextFormField(),
  ],
),

atomsbox 预设表单

创建一个预设的 AppTab 组件

AppTab(
  tabs: [
    Tab(
      icon: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [Icon(Icons.code), AppText('原子')],
      ),
    ),
    Tab(
      icon: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [Icon(Icons.code), AppText('分子')],
      ),
    ),
  ],
  children: [
    Column(
      children: [
        AppCard.elevated(
          height: 300,
          width: double.infinity,
          child: Center(child: AppText('原子')),
        ),
      ],
    ),
    Column(
      children: [
        AppCard.elevated(
          height: 300,
          width: double.infinity,
          child: Center(child: AppText('分子')),
        ),
      ],
    ),
  ],
),

atomsbox 预设标签

使用示例代码

下面是一个完整的示例代码，展示了如何在应用中使用 atomsbox 组件。

import 'package:atomsbox/atomsbox.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static final ValueNotifier<ThemeMode> themeNotifier =
      ValueNotifier(ThemeMode.light);

  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: themeNotifier,
      builder: (_, ThemeMode currentMode, __) {
        return MaterialApp(
          // 移除调试横幅
          debugShowCheckedModeBanner: false,
          theme: AppTheme.theme,
          darkTheme: AppTheme.darkTheme,
          themeMode: currentMode,
          home: const AtomsboxComponents(),
        );
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('atomsbox'),
        actions: [
          Container(
            margin: const EdgeInsets.only(right: 4.0),
            child: IconButton(
              onPressed: () {
                MyApp.themeNotifier.value =
                    MyApp.themeNotifier.value == ThemeMode.light
                        ? ThemeMode.dark
                        : ThemeMode.light;
              },
              icon: const Icon(Icons.light_mode),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(AppConstants.sm),
          child: AppTab(
            tabs: [
              Tab(
                icon: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [const Icon(Icons.code), AppText('示例 #1')],
                ),
              ),
              Tab(
                icon: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [const Icon(Icons.code), AppText('示例 #2')],
                ),
              ),
              Tab(
                icon: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [const Icon(Icons.code), AppText('示例 #3')],
                ),
              ),
            ],
            children: const [
              AppFormExample(),
              AppExpansionTileExample(),
              AppGridExample(),
            ],
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: AppConstants.sm,
        vertical: AppConstants.xlg,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AppForm(
            title: AppText('这是一个表单'),
            description: AppText('这是表单描述'),
            formButton: AppFilledButton.gradient(
              onPressed: () {},
              child: AppText('提交'),
            ),
            formItemNames: const ['一', '二', '三'],
            formItems: [
              AppTextFormField(),
              AppTextFormField(),
              AppTextFormField(),
            ],
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const sampleText =
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';

    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: AppConstants.sm,
        vertical: AppConstants.xlg,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AppExpansionTile(
            title: AppText('这是一个展开式卡片'),
            children: [
              AppText(sampleText),
            ],
          ),
          const SizedBox(height: AppConstants.sm),
          AppExpansionTile.secondary(
            title: AppText('这是一个展开式卡片'),
            children: [
              AppText(sampleText),
            ],
          ),
          const SizedBox(height: AppConstants.sm),
          AppExpansionTile.gradient(
            title: AppText('这是一个展开式卡片'),
            children: [
              AppText(sampleText),
            ],
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const imageUrl =
        'https://images.unsplash.com/photo-1679841350010-64f5b144944f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80';

    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: AppConstants.sm,
        vertical: AppConstants.xlg,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AppGrid(
            title: AppText('这是一个网格'),
            description: AppText('这是描述'),
            gridSettings: const AppGridSettings(
              crossAxisCount: 2,
              childAspectRatio: 0.7,
            ),
            gridItems: [1, 2, 3, 4]
                .map(
                  (e) => AppUserCard(
                    type: AppCardType.outlined,
                    onTap: () {},
                    imageUrl: imageUrl,
                    headline: AppText.bodyLarge('Max on Flutter', maxLines: 1),
                    supportingText: '支持文本',
                    actions: AppFilledButton(
                      onPressed: () {},
                      child: AppText('添加'),
                    ),
                  ),
                )
                .toList(),
          ),
          const SizedBox(height: AppConstants.xlg),
          LayoutBuilder(
            builder: (context, constraints) {
              const gridItems = [1, 2, 3, 4, 5, 6];
              const crossAxisCount = 2;
              const gridItemHeight = 48;
              const horizontalSpacing = AppConstants.sm * (crossAxisCount + 1);
              const verticalSpacing = AppConstants.sm * (crossAxisCount + 1);

              return AppGrid(
                title: AppText('这是一个网格'),
                description: AppText('这是描述'),
                height: gridItemHeight * (gridItems.length / crossAxisCount) +
                    verticalSpacing,
                gridSettings: AppGridSettings(
                  crossAxisCount: crossAxisCount,
                  childAspectRatio: (constraints.maxWidth - horizontalSpacing) /
                      crossAxisCount /
                      gridItemHeight,
                ),
                gridItems: gridItems
                    .map(
                      (e) => AppListTile(
                        onTap: () {},
                        leadingWidth: 48,
                        leading: AppImage.network(imageUrl, height: 48),
                        title: AppText.bodySmall(
                          '这是一个列表项',
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    )
                    .toList(),
              );
            },
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，关于Flutter中的功能集合插件atomsbox的使用，下面我将提供一些示例代码来展示其基本用法。请注意，由于atomsbox并非一个官方或广泛知名的Flutter插件，因此以下示例可能需要根据实际的插件文档进行调整。假设atomsbox提供了一些常用的UI组件和功能，以下是一些可能的用法示例：

1. 添加依赖

首先，确保在pubspec.yaml文件中添加了atomsbox的依赖（注意：这里假设atomsbox是一个有效的Flutter插件）：

dependencies:
  flutter:
    sdk: flutter
  atomsbox: ^x.y.z  # 替换为实际的版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入atomsbox：

import 'package:atomsbox/atomsbox.dart';

3. 使用示例

示例1：使用按钮组件

假设atomsbox提供了一个自定义按钮组件：

import 'package:flutter/material.dart';
import 'package:atomsbox/atomsbox.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AtomsBox Example'),
        ),
        body: Center(
          child: AtomsBoxButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: Text('Custom Button'),
          ),
        ),
      ),
    );
  }
}

// 假设AtomsBoxButton是插件提供的一个按钮组件
class AtomsBoxButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Widget child;

  const AtomsBoxButton({required this.onPressed, required this.child});

  @override
  Widget build(BuildContext context) {
    // 这里假设AtomsBoxButton有一个自定义的样式或行为
    return ElevatedButton(
      onPressed: onPressed,
      child: child,
      style: ButtonStyle(
        // 自定义样式
        backgroundColor: MaterialStateProperty.all(Colors.blue),
      ),
    );
  }
}

注意：这里的AtomsBoxButton仅作为示例，实际使用时请查阅atomsbox的文档以了解正确的组件名称和用法。

示例2：使用对话框组件

假设atomsbox提供了一个自定义对话框组件：

void showCustomDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return AtomsBoxDialog(
        title: Text('Custom Dialog'),
        content: Text('This is a custom dialog from atomsbox.'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('OK'),
          ),
        ],
      );
    },
  );
}

// 在你的MyApp或某个按钮的onPressed回调中调用showCustomDialog
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AtomsBox Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showCustomDialog(context);
            },
            child: Text('Show Dialog'),
          ),
        ),
      ),
    );
  }
}

// 假设AtomsBoxDialog是插件提供的一个对话框组件
class AtomsBoxDialog extends StatelessWidget {
  final Widget title;
  final Widget content;
  final List<Widget> actions;

  const AtomsBoxDialog({required this.title, required this.content, required this.actions});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: title,
      content: content,
      actions: actions,
    );
  }
}

注意：同样，这里的AtomsBoxDialog仅作为示例，实际使用时请查阅atomsbox的文档。

总结

以上示例展示了如何在Flutter项目中使用一个假设的atomsbox插件。由于atomsbox并非一个官方或广泛认知的插件，因此你需要查阅其官方文档以了解实际的组件名称、属性和用法。如果atomsbox提供了其他功能（如网络请求、数据存储等），则你需要根据具体需求查阅相关文档并进行相应的实现。

回到顶部