今天发现一个 好用的东西:
- WidgetBuilder
- Builder
最早这个 东西是我在 路由表里面看到的;
final Map<String, WidgetBuilder> routes = { '/': (BuildContext context) => HomeContent(), '/statelessWidget': (BuildContext context) => ComponentStateless(), '/statefulWidget': (BuildContext context) => ComponentStateful(), '/layout': (BuildContext context) => Layout(), };
刚开始看见还不是很懂,不知道这个东西怎么用;今天才发现 是要配合 Builder才能使用;就是我们 平常用的 build
@override Widget build(BuildContext context) {}其实这个东西我们也能自己来调用;这样一来 灵活度就变的很高!
例如有个需求是这样的:
左边内容很确定 都是Text 组件;
右边就不确定了,有的是一个, 有的是两个 还有的是三个; 要是通过遍历的方式,在通过下标来判断 就很不够优雅;
今天发现一个新的方式:
- 首先写一个 Map 配置
- 通过 遍历 调用 WidgetBuilder,那不是很方便了?
我的 Map 配置可以这么写
final List<Map> _listMap = [ { 'title': S.current.countryRegion, //不抽离 直接写 'build': (BuildContext context) => Row( children: [ cachedImage( 'https://test-img.vandream.com/1/01dc98e6976003.png', width: AppScreen.calc(54), height: AppScreen.calc(36), ), Padding( padding: EdgeInsets.symmetric( horizontal: AppScreen.calc(10), ), child: Text( "Malaysia", style: AppTextStyle.textStyle_28_999999, ), ), buttonMore() ], ), }, { 'title': S.current.language, // 抽离出来 'build': _languageBuild, }, { 'title': S.current.currency, 'build': _currencyBuild, } ];
对应的抽离方法:
static Widget _countryRegionBuild(BuildContext context) { return Row( children: [ cachedImage( 'https://test-img.vandream.com/1/01dc98e6976003.png', width: AppScreen.calc(54), height: AppScreen.calc(36), ), Padding( padding: EdgeInsets.symmetric( horizontal: AppScreen.calc(10), ), child: Text( "Malaysia", style: AppTextStyle.textStyle_28_999999, ), ), buttonMore() ], ); } static Widget _languageBuild(BuildContext context) { return Text('_country'); } static Widget _currencyBuild(BuildContext context) { return Text('_country'); }
使用 Builder 调用:
Builder(builder: value['build'] as WidgetBuilder),
完整测试代码:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:gbm_flutter/const/app_config.dart'; import 'package:gbm_flutter/const/app_textstyle.dart'; import 'package:gbm_flutter/generated/l10n.dart'; import 'package:gbm_flutter/utils/app_navigation.dart'; import 'package:gbm_flutter/utils/app_screen.dart'; import 'package:gbm_flutter/utils/app_widget.dart'; import 'package:gbm_flutter/wrap/provider/provider_root_country.dart'; import 'package:gbm_flutter/wrap/provider/provider_root_currency.dart'; import 'package:provider/provider.dart'; class PageSetting extends StatefulWidget { const PageSetting({Key? key}) : super(key: key); @override _PageSettingState createState() => _PageSettingState(); } class _PageSettingState extends State<PageSetting> { final List<Map> _listMap = [ { 'title': S.current.countryRegion, 'build': _countryRegionBuild, // 'build': (BuildContext context) => Row( // children: [ // cachedImage( // 'https://test-img.vandream.com/1/01dc98e6976003.png', // width: AppScreen.calc(54), // height: AppScreen.calc(36), // ), // Padding( // padding: EdgeInsets.symmetric( // horizontal: AppScreen.calc(10), // ), // child: Text( // "Malaysia", // style: AppTextStyle.textStyle_28_999999, // ), // ), // buttonMore() // ], // ), }, { 'title': S.current.language, 'build': _languageBuild, //'build': (BuildContext context) => Text("BBB"), }, { 'title': S.current.currency, // 'build': (BuildContext context) => _currency, 'build': _currencyBuild, } ]; @override Widget build(BuildContext context) { return Scaffold( appBar: appBar( onPress: () { AppNavigator().navigateBack(context); }, lable: "Settings"), body: Consumer2<ProviderRootCountry, ProviderRootCurrency>( builder: ( BuildContext context, ProviderRootCountry providerCountry, ProviderRootCurrency providerCurrency, Widget? child, ) { return SingleChildScrollView( child: FractionallySizedBox( widthFactor: 1, child: Column( children: [ Padding(padding: EdgeInsets.only(top: AppScreen.calc(24))), ..._listMap .asMap() .map((key, value) => MapEntry( key, Container( height: AppScreen.calc(96), color: Colors.white, padding: EdgeInsets.only( left: AppScreen.calc(30), right: AppScreen.calc(30), ), child: Container( decoration: BoxDecoration( border: key == _listMap.length - 1 ? null : Border( bottom: BorderSide( width: 1, color: AppColor.colordddddd), ), ), child: Row( children: [ Text( value['title'], style: AppTextStyle.textStyle_28_333333, ), Spacer(), Builder( builder: value['build'] as WidgetBuilder), ], ), ), ))) .values .toList() ], ), ), ); }, ), ); } static Widget _countryRegionBuild(BuildContext context) { return Row( children: [ cachedImage( 'https://test-img.vandream.com/1/01dc98e6976003.png', width: AppScreen.calc(54), height: AppScreen.calc(36), ), Padding( padding: EdgeInsets.symmetric( horizontal: AppScreen.calc(10), ), child: Text( "Malaysia", style: AppTextStyle.textStyle_28_999999, ), ), buttonMore() ], ); } static Widget _languageBuild(BuildContext context) { return Text('_country'); } static Widget _currencyBuild(BuildContext context) { return Text('_country'); } }
Flutter WidgetBuilder Builder
猜你喜欢
转载自blog.csdn.net/nicepainkiller/article/details/123134292
今日推荐
周排行