Flutter条件渲染插件conditioned的使用

标题

Flutter条件渲染插件conditioned的使用

内容

package: conditioned

一个包含一组Widget的包，用于从你的布局代码中移除丑陋的if、if else和switch语句，并保持代码更一致。

使用

Conditioned Widget就像其他任何Widget一样，可以在你的Widget树中使用。Conditioned将有一个子节点。这个子节点是什么取决于你。 你将提供情况，Conditioned会决定调用哪个builder方法。

注意： 你总是需要提供一个返回Widget的方法作为builder。使用Builder而不是Widgets可以提高性能并允许我们使用null对象。

基础知识

当你想要根据条件添加特定的子节点时，可以通过使用Conditioned Widget来避免if、else if和else的混乱。Conditioned将使用第一个Case的expression验证为true时的builder方法。

不使用Conditioned

我们不能直接在布局代码中使用if .. else if .. else。我们需要将其传播到一个函数（不推荐）或一个新的Widget。

Widget build(BuildContext context) {
  return Container(
    child: _getIcon(),
  );
}

Widget _getIcon() {
  if (myNumber < 25)
    return Icon(Icons.ac_unit);
  else if (myNumber < 50)
    return Icon(Icons.home);
  else if (myNumber < 75)
    return Icon(Icons.wb_cloudy);
  else
    return Icon(Icons.wb_sunny);
}

使用Conditioned

通过使用Conditioned，你不需要在if .. else if .. else点处打断布局树。你可以在有意义的地方打断树，通常是条件之后。

Widget build(BuildContext context) {
  return Container(
    child: Conditioned(
      cases: [
        Case(myNumber < 25, builder: () =&gt; Icon(Icons.ac_unit)),
        Case(myNumber < 50, builder: () =&gt; Icon(Icons.home)),
        Case(myNumber < 75, builder: () =&gt; Icon(Icons.wb_cloudy)),
      ],
      defaultBuilder: () =&gt; Icon(Icons.wb_sunny),
    ),
  );
}

简单布尔检查

对于简单的真/假检查，你可以使用Conditioned.boolean构造函数。它不会减少你的代码行数，但它确实使代码与布局代码保持一致。

不使用Conditioned.boolean

我们不能直接在布局代码中使用if .. else。我们需要将其传播到一个函数（不推荐）或一个新的Widget。

Widget build(BuildContext context) {
    return Container(
        child: myNumber > 50
          ? Text(
              'The condition is true!',
              style: TextStyle(color: Colors.green[200]),
            )
          : Text(
              'The condition is false!',
              style: TextStyle(color: Colors.green[800]),
        ),
    );
}

使用Conditioned.boolean

通过使用Conditioned.boolean，你不需要在布尔条件点处打断布局树。你可以在有意义的地方打断树，通常是条件之后。

Widget build(BuildContext context) {
    return Container(
        child: Conditioned.boolean( myNumber > 50,
            trueBuilder: () => Text(
              'The condition is true!',
              style: TextStyle(color: Colors.orange[200]),
            ),
            falseBuilder: () => Text(
              'The condition is false!',
              style: TextStyle(color: Colors.orange[800]),
            ),
        ),
    );
}

switch情况

如果你不想使用switch而是想通过等价性检查，你可以使用Conditioned.equality<T>静态方法。

假设我们需要根据以下信息构建屏幕：

enum State {empty, loading, full, error}
final state = State.idle;

不使用Conditioned.equality<T>

我们不能直接在布局代码中使用switch。我们需要将其传播到一个函数（不推荐）或一个新的Widget。

Widget build(BuildContext context) {
  return Container(
    child: _getStateText(),
  );
}

Widget _getStateText() {
  switch(state) {
    case State.loading:
      return Text('The device is loading');
    case State.full:
      return Text('The device is fully loaded');
    case State.error:
      return Text('An error occured');
    default:
      return Text('The device is operating as expected');
  }
}

使用Conditioned.equality<T>

通过使用Conditioned.equality<T>，你不需要在switch点处打断布局树或引入Builder Widget。你可以在有意义的地方打断树，例如在switch之后。

Widget build(BuildContext context) {
  return Container(
    child: Conditioned.equality<State>( state,
      values: [
        Value(State.loading, builder: () => Text('The device is loading')),
        Value(State.full, builder: () => Text('The device is fully loaded')),
        Value(State.error, builder: () => Text('An error occured')),
      ],
      defaultBuilder: () => Text('The device is operating as expected')
    ),
  );
}

示例代码

import 'package:conditioned/conditioned.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final _myNumberNotifier = ValueNotifier<double>(0.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Conditioned Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Conditioned Demo'),
        ),
        body: Column(
          children: <Widget>[
            ValueListenableBuilder<double>(
              valueListenable: _myNumberNotifier,
              builder: (context, myNumber, child) => Column(
                children: <Widget>[
                  Conditioned(
                    cases: [
                      Case(myNumber < 22, builder: () => Icon(Icons.ac_unit)),
                      Case(myNumber <  50, builder: () => Icon(Icons.home)),
                      Case(myNumber <  75, builder: () => Icon(Icons.wb_cloudy)),
                    ],
                    defaultBuilder: () => Icon(Icons.wb_sunny),
                  ),
                  Conditioned.boolean(
                    myNumber > 50,
                    trueBuilder: () => Icon(Icons.airplanemode_active),
                    falseBuilder: () => Icon(Icons.directions_car),
                  ),
                  Conditioned.equality<int>(
                    myNumber.round(),
                    values: [
                      Value(100, builder: () => Icon(Icons.wb_sunny)),
                      Value(0, builder: () => Icon(Icons.add_a_photo))
                    ],
                    defaultBuilder: () => Icon(Icons.ac_unit),
                  ),
                  Text(myNumber.toStringAsFixed(1)),
                  Slider(
                    value: myNumber,
                    min: 0,
                    max: 100,
                    onChanged: (value) => _myNumberNotifier.value = value,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}