Flutter条件渲染插件conditional_wrapper的使用
conditional_wrapper简介
conditional_wrapper 是一个用于在 Flutter 中根据条件动态包装子组件的小部件。它允许你在运行时决定是否将某个小部件包裹在一个特定的装饰器中。
特性：
- 条件化地包裹子组件。
- 支持自定义包装逻辑。
- 高度灵活，适用于多种场景。
使用示例
以下是一个完整的示例，展示了如何使用 conditional_wrapper 插件来实现条件渲染。
import 'package:conditional_wrapper/conditional_wrapper.dart';
import 'package:flutter/material.dart';
void main() {
runApp(ConditionalWrapperHome());
}
class ConditionalWrapperHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Conditional Wrapper Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
final containerKey = GlobalKey(debugLabel: 'container');
final containerKey2 = GlobalKey(debugLabel: 'container2');
class _MyHomePageState extends State<MyHomePage> {
bool shouldWrap1 = false;
bool showFirstOption = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Conditional Wrapper Example'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第一部分：条件包裹示例
Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Don't Wrap"),
Switch.adaptive(
value: shouldWrap1,
onChanged: (value) {
setState(() {
shouldWrap1 = value;
});
}),
Text('Wrap'),
],
),
ConditionalWrapper(
condition: shouldWrap1,
child: Text(shouldWrap1 ? 'Wrapped' : 'Unwrapped'),
builder: (BuildContext context, Widget child) {
return Column(
children: [
Container(
key: containerKey,
padding: EdgeInsets.all(20),
child: child,
color: Colors.blue,
),
Text('Some other child inside a Column'),
],
);
},
),
],
),
Divider(),
// 第二部分：多选项条件包裹示例
Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("First Wrap Option"),
Switch.adaptive(
value: showFirstOption,
onChanged: (value) {
setState(() {
showFirstOption = value;
});
}),
Text('Second Wrap Option'),
],
),
ConditionalWrapper(
condition: !showFirstOption,
ifFalse: (context, child) => Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2)),
padding: EdgeInsets.all(5),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('This is the second'),
child,
Text('wrapping option'),
],
),
),
child: Container(
padding: EdgeInsets.all(5),
color: Colors.blue,
child: Text('Child Widget'),
),
builder: (BuildContext context, Widget child) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
),
padding: EdgeInsets.all(5),
child: Column(
children: [
Text('This is the first'),
child,
Text('wrapping option'),
],
),
);
},
),
],
)
],
),
);
}
}代码解析
1. 条件包裹的基本用法
ConditionalWrapper(
condition: shouldWrap1,
child: Text(shouldWrap1 ? 'Wrapped' : 'Unwrapped'),
builder: (BuildContext context, Widget child) {
return Column(
children: [
Container(
key: containerKey,
padding: EdgeInsets.all(20),
child: child,
color: Colors.blue,
),
Text('Some other child inside a Column'),
],
);
},
)condition: 判断是否需要包裹子组件。child: 被包裹的子组件。builder: 自定义包裹逻辑，返回新的组件树。
2. 多选项条件包裹
ConditionalWrapper(
condition: !showFirstOption,
ifFalse: (context, child) => Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2)),
padding: EdgeInsets.all(5),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('This is the second'),
child,
Text('wrapping option'),
],
),
),
child: Container(
padding: EdgeInsets.all(5),
color: Colors.blue,
child: Text('Child Widget'),
),
builder: (BuildContext context, Widget child) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
),
padding: EdgeInsets.all(5),
child: Column(
children: [
Text('This is the first'),
child,
Text('wrapping option'),
],
),
);
},
)
1 回复
更多关于Flutter条件渲染插件conditional_wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
conditional_wrapper 是一个用于在 Flutter 中进行条件渲染的插件。它允许你根据条件来包裹一个 widget，或者直接返回该 widget。这在某些情况下非常有用，比如根据某些条件来决定是否添加一个装饰、边距、或者其他包装 widget。
安装
首先，你需要在 pubspec.yaml 文件中添加 conditional_wrapper 依赖：
dependencies:
flutter:
sdk: flutter
conditional_wrapper: ^1.0.0然后运行 flutter pub get 来安装依赖。
使用
conditional_wrapper 提供了一个 ConditionalWrapper widget，它接受以下参数：
condition: 一个布尔值，决定是否应用包装。wrapper: 一个函数，接受一个Widget并返回一个包装后的Widget。child: 需要被包装的Widget。
示例
以下是一个简单的示例，展示了如何使用 ConditionalWrapper 来根据条件包裹一个 Text widget：
import 'package:flutter/material.dart';
import 'package:conditional_wrapper/conditional_wrapper.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Conditional Wrapper Example'),
),
body: Center(
child: ConditionalWrapper(
condition: true, // 这里可以根据你的条件来设置
wrapper: (child) => Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: child,
),
child: Text(
'Hello, World!',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
),
);
}
}解释
condition: true: 这里我们设置条件为true，所以Textwidget 会被Container包裹。wrapper: (child) => Container(...): 这是一个函数，它接受一个childwidget 并返回一个包装后的Container。child: Text(...): 这是需要被包装的Textwidget。
如果 condition 为 false，Text widget 将不会被 Container 包裹，而是直接显示。
其他用法
你也可以使用 ConditionalWrapper 来根据条件添加多个包装层，或者根据不同的条件应用不同的包装。
ConditionalWrapper(
condition: someCondition,
wrapper: (child) => Padding(
padding: EdgeInsets.all(10),
child: child,
),
child: ConditionalWrapper(
condition: anotherCondition,
wrapper: (child) => Container(
color: Colors.red,
child: child,
),
child: Text('Hello, World!'),
),
);