Flutter插件flutter_androssy的使用_一个包含高级样式和控制系统的Widget集合

Flutter插件flutter_androssy的使用_一个包含高级样式和控制系统的Widget集合

flutter_androssy

flutter_androssy 是一个包含高级样式和控制系统的Widget集合。

主要内容

首先，我们需要导入必要的包：

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_andomie/core.dart';
import 'package:flutter_androssy/core.dart';
import 'package:flutter_androssy/extensions.dart';
import 'package:flutter_androssy/widgets.dart';

然后，我们定义应用的入口点：

Future<void> main() async {
  runApp(const Application());
}

简单的应用

接下来，我们创建一个简单的应用 Application：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "简单应用",
      theme: ThemeData(
        primaryColor: Colors.blue,
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

Androssy 应用

如果我们要使用 AndrossyApp，则可以这样定义：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AndrossyApp(
      title: "Androssy 应用",
      home: const Home(),
    );
  }
}

视图观察者

现在我们来实现一个具有视图观察者的应用 Home。这个例子展示了如何使用 ViewObserver 来动态更新UI。

class Home extends AndrossyActivity<HomeController> {
  const Home({super.key});

  [@override](/user/override)
  HomeController init(BuildContext context) {
    return HomeController();
  }

  [@override](/user/override)
  AppBar? onCreateAppbar(BuildContext context) {
    return AppBar(
      centerTitle: true,
      title: TextView(
        text: "视图观察者",
        textSize: 20,
        textColor: context.primaryColor,
        textFontWeight: FontWeight.bold,
      ),
    );
  }

  [@override](/user/override)
  Widget onCreate(BuildContext context, AndrossyInstance instance) {
    return LinearLayout(
      padding: 32,
      width: double.infinity,
      height: double.infinity,
      layoutGravity: LayoutGravity.center,
      children: [
        ViewObserver(
          observer: controller.counter,
          builder: (con, value) {
            return TextView(
              text: value.toString(),
              textSize: 32,
              textFontWeight: FontWeight.bold,
              textColor: Colors.grey,
              gravity: Alignment.center,
            );
          },
        ),
        Button(
          marginTop: 24,
          width: 200,
          borderRadius: 16,
          text: "开始",
          textAllCaps: true,
          textFontWeight: FontWeight.bold,
          controller: controller.btnStart,
        ),
      ],
    );
  }
}

class HomeController extends AndrossyController {
  final counter = Observer(0);
  final btnStart = ButtonController();

  [@override](/user/override)
  void onListener(BuildContext context) {
    btnStart.setOnClickListener((context) async {
      btnStart.setEnabled(false);
      for (int i = 0; i <= 100; i++) {
        counter.value = i;
        if (i == 100) btnStart.setEnabled(true);
        await Future.delayed(const Duration(milliseconds: 100));
      }
    });
  }
}

编辑布局

最后，我们来看一下如何使用 EditLayout 来构建一个表单。

class Home extends AndrossyActivity<HomeController> {
  const Home({super.key});

  [@override](/user/override)
  HomeController init(BuildContext context) {
    return HomeController();
  }

  [@override](/user/override)
  AppBar? onCreateAppbar(BuildContext context) {
    return AppBar(
      centerTitle: true,
      title: TextView(
        text: "编辑布局",
        textSize: 20,
        textColor: context.primaryColor,
        textFontWeight: FontWeight.bold,
      ),
    );
  }

  [@override](/user/override)
  Widget onCreate(BuildContext context, AndrossyInstance instance) {
    return EditLayout(
      scrollable: true,
      padding: 40,
      width: double.infinity,
      height: double.infinity,
      layoutGravity: LayoutGravity.center,
      onValid: controller.btnSubmit.setEnabled,
      children: [
        const TextView(
          text: "注册",
          textColor: Colors.black,
          textFontWeight: FontWeight.bold,
          textSize: 24,
        ),
        EditText(
          controller: controller.etEmail,
          marginTop: 24,
          hint: "邮箱",
          text: "example@gmail.com",
          textSize: 18,
          inputType: TextInputType.emailAddress,
          onValidator: Validator.isValidEmail,
        ),
        EditText(
          controller: controller.etPassword,
          marginTop: 24,
          hint: "密码",
          text: "123456",
          digits: "1234567890",
          inputType: TextInputType.visiblePassword,
          onValidator: (value) => value.length > 5,
        ),
        EditText(
          controller: EditTextController(),
          marginTop: 24,
          hint: "确认密码",
          text: "123456",
          digits: "1234567890",
          inputType: TextInputType.visiblePassword,
          onValidator: (value) => controller.isValidConfirmPassword(value),
        ),
        EditLayout(
          controller: EditLayoutController(),
          width: double.infinity,
          marginTop: 24,
          orientation: Axis.horizontal,
          children: [
            EditText(
              controller: EditTextController(),
              flex: 1,
              hint: "年龄",
              digits: "1234567890",
              onValidator: (value) => (int.tryParse(value) ?? 0) > 18,
            ),
            16.w,
            EditText(
              controller: EditTextController(),
              flex: 1,
              hint: "性别",
              onValidator: (value) {
                return ["Male", "Female", "Other"].contains(value);
              },
            ),
          ],
        ),
        Button(
          controller: controller.btnSubmit,
          enabled: false,
          marginTop: 50,
          width: double.infinity,
          height: 50,
          borderRadius: 12,
          text: "提交",
        ),
      ],
    );
  }
}

class HomeController extends AndrossyController {
  final etEmail = EditTextController();
  final etPassword = EditTextController();
  final btnSubmit = ButtonController();

  [@override](/user/override)
  void onListener(BuildContext context) {
    btnSubmit.setOnClickListener(onRegister);
  }

  bool isValidConfirmPassword(String? value) {
    final password = etPassword.text;
    return value == password;
  }

  void onRegister(BuildContext context) {
    final email = etEmail.text;
    final password = etPassword.text;
    log("注册 {$email, $password}");
  }
}

更多关于Flutter插件flutter_androssy的使用_一个包含高级样式和控制系统的Widget集合的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter插件flutter_androssy的使用_一个包含高级样式和控制系统的Widget集合的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，flutter_androssy 是一个相对较少人知的插件，它可能提供了一些特定的功能或工具，但由于其知名度较低，相关的文档和社区支持可能有限。要探索和使用 flutter_androssy，你可以按照以下步骤进行：

1. 查找插件的官方文档

首先，尝试查找 flutter_androssy 的官方文档。通常，插件的文档会提供关于其功能、使用方法以及示例代码的详细信息。

  • 访问 pub.dev 并搜索 flutter_androssy。
  • 查看插件的详细信息页面，通常会有“Installation”、“Usage”和“Example”等部分。

2. 安装插件

在你的 pubspec.yaml 文件中添加 flutter_androssy 插件的依赖项：

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

替换 ^版本号 为你在 pub.dev 上找到的最新版本号。

然后运行 flutter pub get 来安装插件。

3. 探索插件的功能

由于 flutter_androssy 的知名度较低，你可能需要直接查看插件的源代码来了解其功能。你可以在 pubspec.yaml 中找到插件的 GitHub 仓库链接，然后访问该仓库查看源代码和文档。

  • 在 pubspec.yaml 中，找到 repository 或 homepage 字段，点击链接访问插件的源代码仓库。
  • 查看 README.md 文件，通常会有关于插件的详细介绍和使用示例。

4. 尝试使用插件

根据你找到的文档或示例代码，尝试在项目中集成和使用 flutter_androssy。如果文档不完整，你可以通过阅读插件的源代码来理解其功能和使用方法。

例如，假设 flutter_androssy 提供了某种自定义的 Widget，你可以尝试在你的 Flutter 应用中使用它：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Androssy Example'),
      ),
      body: Center(
        child: AndrossyWidget(), // 假设插件提供了这个 Widget
      ),
    );
  }
}
回到顶部