Flutter条件构建插件builder_when的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter条件构建插件builder_when的使用

概述

BuilderWhen 类是为 Flutter 应用程序设计的一个简单而强大的工具。它提供了一种流线型的方式来根据给定的条件有条件地构建和显示小部件。

特性

  • 条件渲染：可以轻松地根据布尔条件渲染不同的小部件。
  • 简洁高效：简洁易懂的语法，增强了代码的可读性和可维护性。

使用方法

要使用 BuilderWhen，只需提供一个条件、一个在条件为真时显示的小部件（isTrue）和一个在条件为假时显示的小部件（isFalse）。基于条件的状态，将会渲染 isTrue 或 isFalse。此功能特别适用于需要根据用户交互或数据变化动态改变 UI 元素的场景。

示例

BuilderWhen(
  condition: condition,
  isTrue: (context) => Text(
    'Condition is TRUE',
    style: TextStyle(fontSize: 24, color: Colors.green),
  ),
  isFalse: (context) => Text(
    'Condition is FALSE',
    style: TextStyle(fontSize: 24, color: Colors.red),
  ),
)

完整示例代码

以下是完整的示例代码，演示了如何在 Flutter 应用中使用 BuilderWhen 插件。

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

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

class BuilderWhenPage extends StatelessWidget {
  const BuilderWhenPage({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: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 条件变量
  bool condition = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: BuilderWhen(
        // 使用条件变量来决定显示哪个小部件
        condition: condition,
        // 当条件为真时显示的小部件
        isTrue: (context) => const Center(
          child: Text('True'),
        ),
        // 当条件为假时显示的小部件
        isFalse: (context) => const Center(
          child: Text('False'),
        ),
      ),
      // 添加一个浮动按钮来切换条件
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => condition = !condition),
        tooltip: 'Change',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用builder_when插件的一个示例。builder_when是一个条件构建器插件，允许你根据条件来构建不同的Widget。

首先，确保你已经在pubspec.yaml文件中添加了builder_when依赖：

dependencies:
  flutter:
    sdk: flutter
  builder_when: ^latest_version  # 请替换为最新版本号

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

以下是一个简单的示例，展示如何使用BuilderWhen来根据条件渲染不同的Widget：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BuilderWhen Example'),
        ),
        body: Center(
          child: BuilderWhen<bool>(
            condition: () => isConditionMet(),  // 这里是条件函数
            whenTrue: () => Text('Condition is true!'),  // 条件为真时构建的Widget
            whenFalse: () => Text('Condition is false!'),  // 条件为假时构建的Widget
            orElse: () => CircularProgressIndicator(),  // 条件为null时构建的Widget（可选）
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: toggleCondition,
          tooltip: 'Toggle Condition',
          child: Icon(Icons.toggle_on),
        ),
      ),
    );
  }

  // 这是一个简单的状态管理示例，用于切换条件
  bool _condition = false;

  bool isConditionMet() {
    return _condition;
  }

  void toggleCondition() {
    setState(() {
      _condition = !_condition;
    });
  }
}

在这个示例中：

  1. BuilderWhen组件接受一个泛型bool，表示条件类型为布尔值。
  2. condition参数是一个返回布尔值的函数，用于确定当前条件是真还是假。
  3. whenTrue参数是一个返回Widget的函数，当条件为真时构建该Widget。
  4. whenFalse参数是一个返回Widget的函数，当条件为假时构建该Widget。
  5. orElse参数是可选的，当条件为null时构建该Widget（在这个例子中，条件永远不会为null，但你可以根据需要使用它）。

通过点击浮动操作按钮（FAB），你可以切换条件，从而在界面上看到不同的Widget根据条件动态渲染。

这个示例展示了如何使用builder_when插件来根据条件构建不同的Widget，非常适合需要根据某些运行时条件动态改变UI的场景。

回到顶部