[移动开发]Flutter WidgetBuilder Builder

今天发现一个 好用的东西：

• 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 组件；

右边就不确定了，有的是一个， 有的是两个 还有的是三个； 要是通过遍历的方式，在通过下标来判断 就很不够优雅；

今天发现一个新的方式：

1. 首先写一个 Map 配置
2. 通过 遍历 调用? 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');
  }
}

?

?