Flutter条件渲染插件flutter_conditional的使用
Flutter条件渲染插件flutter_conditional的使用
Conditional渲染变得简单！💎
由 💙 开发并维护 scial.app
迁移 🆙
Migrating to 2.0.0
Before
class SomeWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool someCondition = false;
return Conditional.single(
someCondition,
builder: (BuildContext _) => WidgetA(),
fallbackBuilder: (BuildContext _) => WidgetB()
);
}
}
After
class SomeWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool someCondition = false;
return Conditional.single(
condition: someCondition,
widget: WidgetA(),
fallback: WidgetB()
);
}
}
或者使用版本 2.1.0 引入的方法：
.singleBuilder(...).multiCaseBuilder(...).multiMatchBuilder<T>(...).optionalSingleBuilder(...).optionalMultiCaseBuilder(...).optionalMultiMatchBuilder<T>(...)
快速开始 🚀
安装 🧑💻
在 pubspec.yaml 的 dependencies 部分添加以下行：
dependencies:
flutter_conditional: <latest_version>
使用 👽
导入包：
import 'package:flutter_conditional/flutter_conditional.dart';
单一条件
这个构造函数非常简单。你可以传递一个简单的布尔表达式。
class TrueOrFalseWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool ideaForName = false;
return Conditional.single(
condition: ideaForName,
widget: TrueWidget(),
fallback: FalseWidget()
);
}
}
多个情况
这个构造函数允许你传递多个情况，每个情况包含一个布尔表达式和一个部件构建器。
class MultiWidget extends StatelessWidget {
Widget build(BuildContext context) {
final int randomNumber = 69;
final String randomOS = 'Linux';
final bool isSchroedingersCatAlive = true; // 希望如此
return Conditional.multiCase(
cases: [
Case(
condition: randomNumber == 0,
widget: NumberWidget()
),
Case(
condition: randomOS == 'Linux',
widget: OSWidget() // <-- 这个会被返回
),
Case(
condition: isSchroedingersCatAlive,
widget: SchroedingersWidget()
)
],
fallback: OtherWidget()
);
}
}
多种匹配
这个构造函数允许你比较对象。
class CarWidget extends StatelessWidget {
Widget build(BuildContext context) {
final String carCompany = 'Tesla';
return Conditional.multiMatch<String>(
value: carCompany,
values: [
Value(
value: 'Tesla',
widget: TeslaWidget() // <-- 这个会被返回
),
Value(
value: 'Mercedes',
widget: MercedesWidget()
),
Value(
value: 'BMW',
widget: BMWWidget()
)
],
fallback: OtherWidget()
);
}
}
或者
enum Seasons {
summer,
autumn,
winter,
spring
}
class SeasonWidget extends StatelessWidget {
Widget build(BuildContext context) {
final Seasons season = Seasons.winter;
return Conditional.multiMatch<Seasons>(
value: season,
values: [
Value(
value: Seasons.summer,
widget: SummerWidget()
),
Value(
value: Seasons.autumn,
widget: AutumnWidget()
),
Value(
value: Seasons.winter,
widget: WinterWidget() // <-- 这个会被返回
),
Value(
value: Seasons.spring,
widget: SpringWidget()
)
],
fallback: OtherWidget()
);
}
}
其他功能 ⚜️
可选部件
在某些情况下，如果给定条件未满足，则你甚至不想渲染任何部件。
因此我们引入了可以返回 null 的附加函数：
.optionalSingle(...).optionalMultiCase(...).optionalMultiMatch<T>(...)
构建函数
在某些情况下，你可能想使用构建函数。 因此我们引入了接受构建函数的附加函数：
.singleBuilder(...).multiCaseBuilder(...).multiMatchBuilder<T>(...).optionalSingleBuilder(...).optionalMultiCaseBuilder(...).optionalMultiMatchBuilder<T>(...)
isActive
有时你甚至希望使情况成为条件。因此我们引入了 isActive 参数。如果你不希望一个或多个情况被考虑在内，请将 true 传递给它，如以下示例所示：
class ProfileWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool iLoveDart = true;
final bool possiblyChanging = false;
return Conditional.multiCase(
cases: [
Case(
condition: iLoveDart,
isActive: possiblyChanging,
widget: FirstWidget()
),
Case(
condition: iLoveDart,
widget: SecondWidget() // <-- 这个会被返回
)
],
fallback: OtherWidget()
);
}
}
规则 ✅
- 仅标记为
isActive的情况会被考虑。这默认为真。 - 第一个条件为真的部件将被返回。
- 如果你没有使用版本
2.0.0引入的函数，默认的回退部件为SizedBox.shrink()。
贡献 💙
始终开放贡献！贡献者将在此列出。
示例代码
import 'package:flutter/material.dart';
import 'package:flutter_conditional/flutter_conditional.dart';
void main() {
runApp(const App());
}
class App extends StatefulWidget {
const App({super.key});
[@override](/user/override)
State<App> createState() => _AppState();
}
class _AppState extends State<App> {
bool firstExpression = true;
bool secondExpression = true;
String company = 'scial';
[@override](/user/override)
Widget build(BuildContext context) {
final EdgeInsets padding = MediaQuery.of(context).padding;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _toggle,
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
child: const Icon(Icons.toggle_on)
),
body: SingleChildScrollView(
padding: EdgeInsets.only(
left: padding.left + 16.0,
top: padding.top + 16.0,
right: padding.right + 16.0,
bottom: padding.bottom + 16.0
),
child: Column(
children: [
Conditional.single(
condition: firstExpression,
widget: const CustomCard(
color: Colors.blue,
text: 'FIRST EXPRESSION'
)
),
Conditional.multiCase(
cases: <Case>[
Case(
condition: secondExpression,
isActive: false,
widget: const CustomCard(
color: Colors.green,
text: 'SECOND EXPRESSION 1'
)
),
Case(
condition: secondExpression,
widget: const CustomCard(
color: Colors.orange,
text: 'SECOND EXPRESSION 2'
)
)
],
fallback: const CustomCard(
color: Colors.green,
text: 'SECOND EXPRESSION FALLBACK'
)
),
Conditional.multiMatch<String>(
value: company,
values: <Value<String>>[
const Value<String>(
value: 'scial',
widget: CustomCard(
color: Colors.pink,
text: 'scial'
)
),
const Value<String>(
value: 'Tesla',
widget: CustomCard(
color: Colors.purple,
text: 'Tesla'
)
)
]
)
]
)
)
)
);
}
void _toggle() {
setState(() {
firstExpression = !firstExpression;
secondExpression = !secondExpression;
company = company == 'scial' ? 'Tesla' : 'scial';
});
}
}
class CustomCard extends StatelessWidget {
final Color color;
final String text;
const CustomCard({
super.key,
required this.color,
required this.text
});
[@override](/user/override)
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 80.0,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: color
),
child: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14.0,
color: Colors.white
),
)
);
}
}
更多关于Flutter条件渲染插件flutter_conditional的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
