Flutter UI组件库插件artemis_ui_kit的使用

Flutter UI组件库插件artemis_ui_kit的使用

artemis_ui_kit 是一个基于 Artemis 风格指南的 Flutter UI 组件库。它提供了许多现成的组件，可以快速构建符合 Artemis 设计规范的应用程序。

开始使用

在 pubspec.yaml 文件中添加依赖：

dependencies:
  artemis_ui_kit: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

在 pubspec.yaml 的字体部分添加以下内容以支持 Artemis 图标集：

flutter:
  fonts:
    - family: ArtemisIcons
      fonts:
        - asset: packages/artemis_ui_kit/fonts/ArtemisIcons.ttf

示例代码

以下是一个完整的示例代码，展示如何使用 artemis_ui_kit 中的各种组件。

import 'package:artemis_ui_kit/artemis_ui_kit.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool radioButtonValue = false;
  bool checkBoxButtonValue = false;
  bool switchButtonValue = false;
  DateTime time = DateTime.now();
  String selectedStr = "1";
  int panelValue = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              // DropDown 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisDropDown<String>(
                  items: ["1", "2", "3"],
                  label: "测试",
                  itemAsString: (item) => item,
                  onChanged: (s) {
                    print(s);
                  },
                  selectedItem: selectedStr,
                ),
              ),

              // ExpansionTile 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisExpansionTile(
                  title: Text("展开面板"),
                  children: [
                    Text("1"),
                    Text("1"),
                    Text("1"),
                    Text("1"),
                    Text("1"),
                  ],
                ),
              ),

              // RadioButton 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisRadioButton(
                  label: "单选按钮",
                  value: radioButtonValue,
                  labelWidget: Icon(Icons.share),
                  onChanged: (v) {
                    setState(() {
                      radioButtonValue = v;
                    });
                  },
                ),
              ),

              // CheckBox 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisCheckBox(
                  label: "复选框",
                  value: checkBoxButtonValue,
                  checkBoxAtEnd: true,
                  onChanged: (v) {
                    setState(() {
                      checkBoxButtonValue = v;
                    });
                  },
                ),
              ),

              // ButtonPanel 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisButtonPanel(
                  centerAction: () {
                    print(panelValue);
                  },
                  rightAction: () {
                    setState(() {
                      panelValue++;
                    });
                  },
                  leftAction: () {
                    setState(() {
                      panelValue--;
                    });
                  },
                  rightWidget: Icon(ArtemisIcons.rightArrow),
                  centerWidget: Text("$panelValue"),
                  leftWidget: Icon(ArtemisIcons.leftArrow),
                ),
              ),

              // CardField 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisCardField(
                  title: '卡片字段',
                  value: '123',
                ),
              ),

              // Switch 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisSwitch(
                  value: switchButtonValue,
                  switchAtEnd: true,
                  label: '开关',
                  onChanged: (value) {
                    setState(() {
                      switchButtonValue = value;
                    });
                  },
                ),
              ),

              // Button 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisButton(
                  label: '按钮',
                  onPressed: () {},
                  bordered: true,
                  radius: 20,
                ),
              ),

              // TimeField 示例
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ArtemisTimeField(
                  onChange: () {
                    showDialog(
                        context: context,
                        builder: (c) => ArtemisTimePickerDialog()).then((value) {
                      if (value != null) {
                        setState(() {
                          time = value;
                        });
                      }
                    });
                  },
                  label: '时间选择',
                  value: DateFormat("hh:mm").format(time),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}