Flutter UI组件库插件ant_design_flutter的使用

Flutter UI组件库插件ant_design_flutter的使用

Ant Design Flutter

一个为Web/PC应用设计的Flutter UI框架，包含一些高质量的组件。

由于antdf最初是为PC应用设计的，因此不推荐在移动应用中使用，尽管可以使用。

Status Pub Version GitHub

✨ 特性

  • 🌈 针对Web/桌面应用的企业级UI。
  • 📦 提供一组开箱即用的高质量Flutter组件。
  • 🛡 用纯Dart编写并支持空安全。

🖥 环境支持

  • 在Windows和Mac OS上运行

📦 安装

flutter pub add ant_design_flutter

🔨 使用

import 'package:ant_design_flutter/ant_design_flutter.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return AntApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('你已经点击了按钮 $count 次'),
              const SizedBox(height: 8),
              Button(
                type: ButtonType.primary,
                onClick: () => setState(() => count++),
                child: const Text('点击'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Null Safety

antdf 是用带有空安全的Dart编写的，查看 Sound Null Safety 了解更多信息。

🔗 链接

⌨️ 开发

使用Gitpod，一个GitHub上的免费在线开发环境。

Open in Gitpod

或者本地克隆：

$ git clone git@github.com:CalsRanna/ant_design_flutter
$ cd ant_design_flutter
$ flutter pub get
$ flutter run

现在，Flutter将在您的环境中连接的设备上运行。

🤝 贡献

欢迎所有贡献。您可以提交任何建议作为Pull Requests，也可以作为GitHub Issues。

Let's fund issues in this repository

❤️ 赞助商和支持者


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

1 回复

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


当然，以下是如何在Flutter项目中集成并使用ant_design_flutter UI组件库插件的示例代码。ant_design_flutter 是基于 Ant Design 风格的 Flutter 组件库，它提供了一系列高质量的 UI 组件。

1. 添加依赖

首先，你需要在你的 Flutter 项目的 pubspec.yaml 文件中添加 ant_design_flutter 的依赖。

dependencies:
  flutter:
    sdk: flutter
  ant_design_flutter: ^版本号  # 请使用最新版本号

例如，如果当前最新版本是 2.0.0，你应该写成：

dependencies:
  flutter:
    sdk: flutter
  ant_design_flutter: ^2.0.0

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

flutter pub get

2. 导入包

在你需要使用 ant_design_flutter 组件的 Dart 文件中，导入该包：

import 'package:ant_design_flutter/ant_design_flutter.dart';

3. 使用组件

下面是一些常用组件的示例代码：

按钮（Button）

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ant Design Flutter Demo'),
        ),
        body: Center(
          child: AntButton(
            type: 'primary',
            text: 'Primary Button',
            onPressed: () {
              print('Primary Button Pressed');
            },
          ),
        ),
      ),
    );
  }
}

输入框（Input）

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ant Design Flutter Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              AntTextField(
                placeholder: 'Enter something...',
                onEditingComplete: () {
                  print('Editing completed');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

列表（List）

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

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

class MyApp extends StatelessWidget {
  final List<String> data = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ant Design Flutter Demo'),
        ),
        body: AntList(
          dataSource: data,
          itemBuilder: (context, index) {
            return AntListItem(
              title: Text(data[index]),
            );
          },
        ),
      ),
    );
  }
}

4. 运行项目

确保一切配置正确后，你可以通过以下命令运行你的 Flutter 项目：

flutter run

这些示例展示了如何集成和使用 ant_design_flutter 插件中的几个常用组件。你可以根据需要查阅 ant_design_flutter 的官方文档 来了解更多组件及其用法。

回到顶部