Flutter条件渲染插件flutter_conditional_rendering的使用

flutter_conditional_rendering

flutter_conditional_rendering 是一个增强Flutter条件渲染功能的插件，它支持if-else和switch条件。

Why

在Flutter中，如果你想进行条件渲染，你可能会这样做：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        if (someCondition == true)
          Text('The condition is true!'),
      ],
    );
  }
}

但是，如果你想要使用三元（if-else）条件呢？

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        someCondition == true ?
          Text('The condition is true!'):
          Text('The condition is false!'),
      ],
    );
  }
}

对于单个Text小部件来说是好的，但是如果子小部件是多层嵌套时，可读性会迅速变差。

Usage

If-Else condition:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Conditional.single(
          context: context,
          conditionBuilder: (BuildContext context) => someCondition == true,
          widgetBuilder: (BuildContext context) => Text('The condition is true!'),
          fallbackBuilder: (BuildContext context) => Text('The condition is false!'),
        ),
      ],
    );
  }
}

Switch condition:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ConditionalSwitch.single<String>(
          context: context,
          valueBuilder: (BuildContext context) => 'A',
          caseBuilders: {
            'A': (BuildContext context) => Text('The value is A!'),
            'B': (BuildContext context) => Text('The value is B!'),
          },
          fallbackBuilder: (BuildContext context) => Text('None of the cases matched!'),
        ),
      ],
    );
  }
}

Want a list of widgets?

如果你想有条件地渲染一个小部件列表（List<Widget>），请使用Conditional.list()和ConditionalSwitch.list()！

Contributions

如果你发现了一个bug或者想要一个特性，但不知道如何修复/实现它，请填写一个issue。 如果你修复了一个bug或实现了某个特性，请发送一个pull request。

示例代码

下面是一个完整的示例demo，展示了如何使用flutter_conditional_rendering插件来根据计数器的值显示不同的内容：

import 'package:flutter/material.dart';
import 'package:flutter_conditional_rendering/conditional.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            const SizedBox(
              height: 15.0,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.displayLarge,
            ),
            const SizedBox(
              height: 30.0,
            ),
            Conditional.single(
              context: context,
              conditionBuilder: (BuildContext context) => _counter % 2 == 0,
              widgetBuilder: (BuildContext context) {
                return const Column(
                  children: <Widget>[
                    Text(
                      'The number is even.',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Icon(
                      Icons.check,
                      size: 60.0,
                      color: Colors.green,
                    ),
                  ],
                );
              },
              fallbackBuilder: (BuildContext context) {
                return const Column(
                  children: <Widget>[
                    Text(
                      'The number is not even.',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Icon(
                      Icons.close,
                      size: 60.0,
                      color: Colors.red,
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

这个例子展示了如何使用flutter_conditional_rendering插件来根据计数器的值显示不同的内容。当计数器的值为偶数时，显示“数字是偶数”的文本和绿色的勾号图标；否则，显示“数字不是偶数”的文本和红色的叉号图标。