Flutter通用UI组件插件flutter_common_yy_ui的使用

Flutter通用UI组件插件flutter_common_yy_ui的使用

本文将介绍如何使用Flutter通用UI组件插件flutter_common_yy_ui。该插件提供了丰富的UI组件，可以帮助开发者快速构建美观且功能强大的应用程序。

安装插件

首先，在你的pubspec.yaml文件中添加插件依赖：

dependencies:
  flutter_common_yy_ui: ^1.0.0

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

flutter pub get

使用示例

1. 引入插件

在你的Dart文件中引入插件：

import 'package:flutter_common_yy_ui/flutter_common_yy_ui.dart';

2. 使用按钮组件

flutter_common_yy_ui 提供了一个简单的按钮组件，可以快速创建带有样式的按钮。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Common UI 示例'),
        ),
        body: Center(
          child: YYButton(
            text: '点击我',
            onPressed: () {
              print('按钮被点击了！');
            },
          ),
        ),
      ),
    );
  }
}

效果图

YYButton 示例

3. 使用输入框组件

flutter_common_yy_ui 还提供了一个输入框组件，支持文本输入并带有清晰的样式。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Common UI 示例'),
        ),
        body: Center(
          child: YYInputField(
            placeholder: '请输入内容',
            onChanged: (value) {
              print('输入的内容是：$value');
            },
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_common_yy_ui 是一个通用的 Flutter UI 组件库，旨在帮助开发者快速构建常见的用户界面。该库通常包含一些常用的 UI 组件，如按钮、卡片、输入框、对话框等，以简化开发过程并提高代码的可复用性。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_common_yy_ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_common_yy_ui: ^版本号

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

使用示例

以下是一些常见组件的使用示例：

1. 按钮 (YYButton)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Common YY UI Example'),
      ),
      body: Center(
        child: YYButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Pressed');
          },
        ),
      ),
    );
  }
}

2. 卡片 (YYCard)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Common YY UI Example'),
      ),
      body: Center(
        child: YYCard(
          child: Text('This is a card'),
        ),
      ),
    );
  }
}

3. 输入框 (YYInputField)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Common YY UI Example'),
      ),
      body: Center(
        child: YYInputField(
          hintText: 'Enter your name',
          onChanged: (value) {
            print('Input: $value');
          },
        ),
      ),
    );
  }
}

4. 对话框 (YYDialog)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Common YY UI Example'),
      ),
      body: Center(
        child: YYButton(
          text: 'Show Dialog',
          onPressed: () {
            YYDialog.show(
              context,
              title: 'Dialog Title',
              content: 'This is a dialog content.',
              actions: [
                YYButton(
                  text: 'Close',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}
回到顶部