Flutter UI模板管理插件ui_template_bloc的使用

Flutter UI模板管理插件ui_template_bloc的使用

UI模板BLoC

预创建的BLoC逻辑，可以在项目中重用。

UI模板

预创建的BLoC逻辑，可以在项目中重用。

设置

调用设置UI模板服务。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  setupUITemplateServices();
  runApp(const MyApp());
}

接下来设置下拉框BLoC。基本上设置与其他项目中的BLoC相同。

UIDropDownBloc? dropDownBloc;

class MyHomePage extends StatefulWidget {
  UIDropDownBloc? countryDropDownBloc;
  UIDropDownBloc? regionDropDownBloc;
  MyHomePage({super.key, required this.title}) {
    countryDropDownBloc = initDropDownBloc(dropDownItems: ["Philippines", "Australia", "Canada"], localKey: "local_key_country");
    regionDropDownBloc = initDropDownBloc(dropDownItems: ["NCR", "Davao Del Sur", "Davao City"], localKey: "local_key_region");
  }
  final String title;
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

在你的小部件中调用它：

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text("Country DropDown Sample"),
    UITemplate1DropDownWidget(widget.countryDropDownBloc!),
    const Text("Region DropDown Sample"),
    UITemplate1DropDownWidget(widget.regionDropDownBloc!)
  ],
),

接下来的步骤是，如果你想访问下拉框的值，需要调用以下方法：

// 这位于di_service.dart文件中
getService()

// 方法下的此服务，您的键应该是您传递给dropDownBloc的localKey。例如，CountryDropdown有其自己的唯一键来访问存储在仓库中的本地值，或者Region Dropdown有自己的BLoC和唯一键，根据选定的区域访问其值。
getDropDownValue(localKey: "local_key_country")

完整示例代码

main.dart

// ignore_for_file: must_be_immutable

import 'package:flutter/material.dart';
import 'package:ui_template_bloc/core/di_service.dart';
import 'package:ui_template_bloc/features/dropdown/template_dropdown_widget.dart';
import 'package:ui_template_bloc/features/dropdown/ui_dropdown_bloc.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  setupUITemplateServices();
  runApp(const MyApp());
}

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  UIDropDownBloc? countryDropDownBloc;
  UIDropDownBloc? regionDropDownBloc;
  MyHomePage({super.key, required this.title}) {
    countryDropDownBloc = initDropDownBloc(dropDownItems: ["Philippines", "Australia", "Canada"], localKey: "local_key_country");
    regionDropDownBloc = initDropDownBloc(dropDownItems: ["NCR", "Davao Del Sur", "Davao City"], localKey: "local_key_region");
  }
  final String title;
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("Country DropDown Sample"),
            UITemplate1DropDownWidget(widget.countryDropDownBloc!),
            const Text("Region DropDown Sample"),
            UITemplate1DropDownWidget(widget.regionDropDownBloc!)
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


ui_template_bloc 是一个用于管理 Flutter 应用的 UI 模板的插件。它基于 BLoC（Business Logic Component）模式，帮助开发者更轻松地管理和组织 UI 模板。以下是使用 ui_template_bloc 插件的基本步骤和示例。

1. 安装依赖

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

dependencies:
  flutter:
    sdk: flutter
  ui_template_bloc: ^0.1.0  # 请使用最新版本

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

2. 创建 BLoC

接下来，你需要创建一个 BLoC 来管理 UI 模板的状态。例如，创建一个 TemplateBloc：

import 'package:ui_template_bloc/ui_template_bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class TemplateBloc extends Bloc<TemplateEvent, TemplateState> {
  TemplateBloc() : super(TemplateInitial());

  [@override](/user/override)
  Stream<TemplateState> mapEventToState(TemplateEvent event) async* {
    if (event is LoadTemplate) {
      yield TemplateLoading();
      // 模拟加载模板
      await Future.delayed(Duration(seconds: 2));
      yield TemplateLoaded(template: 'Your UI Template');
    }
  }
}

3. 定义事件和状态

你需要定义 BLoC 的事件和状态。例如：

abstract class TemplateEvent {}

class LoadTemplate extends TemplateEvent {}

abstract class TemplateState {}

class TemplateInitial extends TemplateState {}

class TemplateLoading extends TemplateState {}

class TemplateLoaded extends TemplateState {
  final String template;

  TemplateLoaded({required this.template});
}

4. 在 UI 中使用 BLoC

在 Flutter 的 UI 中，你可以使用 BlocProvider 来提供 BLoC，并使用 BlocBuilder 来监听状态的变化：

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

class TemplateScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TemplateBloc()..add(LoadTemplate()),
      child: Scaffold(
        appBar: AppBar(
          title: Text('UI Template'),
        ),
        body: BlocBuilder<TemplateBloc, TemplateState>(
          builder: (context, state) {
            if (state is TemplateLoading) {
              return Center(child: CircularProgressIndicator());
            } else if (state is TemplateLoaded) {
              return Center(child: Text(state.template));
            } else {
              return Center(child: Text('Press button to load template'));
            }
          },
        ),
      ),
    );
  }
}

5. 运行应用

最后，你可以在 main.dart 中运行你的应用：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UI Template',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TemplateScreen(),
    );
  }
}
回到顶部