Flutter 扩展函数项目实用之封装SizedBox

Flutter里扩展函数可以用简化代码写法,关键字为extension,伪代码写法如下:

extension 扩展类名 on 扩展类型 {
//扩展方法
}

在Flutter页面里实现控件间距会常用到SizedBox,可使用扩展函数封装来达到简化代码的目的,基本步骤如下:

1、创建num_extension.dart文件,扩展类名为SizedBox+类型Double+后缀Extension,代码如下:

Dart 复制代码
import 'package:flutter/material.dart';

extension SizedBoxDoubleExtension on double {
  SizedBox get width => SizedBox(width: this);
  SizedBox get height => SizedBox(height: this);
  SizedBox withHeight(double height) => SizedBox(width: this, height: height);
}

2、使用示例对照,节选代码如下:

Dart 复制代码
  ///此为不使用扩展函数的写法
  Widget _buildRow() {
    return Row(
      children: [
        _buildText("1"),
        const SizedBox(
          width: 10,
        ),
        _buildText("2"),
        const SizedBox(
          width: 10,
        ),
        _buildText("3"),
      ],
    );
  }

  ///此为使用扩展函数的写法,要简洁些
  Widget _buildRowExtension() {
    return Row(
      children: [
        _buildText("1"),
        10.0.width,
        _buildText("2"),
        10.0.width,
        _buildText("3"),
      ],
    );
  }

  Widget _buildText(String text) {
    return Text(
      text,
      style: const TextStyle(color: Colors.blue),
    );
  }
相关推荐
孜燃7 小时前
Flutter APP跳转Flutter APP 携带参数
前端·flutter
帅气马战的账号17 小时前
开源鸿蒙Flutter轻量化组件手册:8类高频工具模块,极速适配多终端
flutter
克喵的水银蛇11 小时前
Flutter 通用标签选择组件:TagSelector 支持单选 / 多选
javascript·windows·flutter
kirk_wang11 小时前
Flutter `video_player`库在鸿蒙端的视频播放优化:一份实用的适配指南
flutter·移动开发·跨平台·arkts·鸿蒙
song50111 小时前
鸿蒙 Flutter 图像识别进阶:物体分类与花卉识别(含离线模型)
人工智能·分布式·python·flutter·3d·华为·分类
tangweiguo0305198712 小时前
Flutter头像上传:使用Riverpod实现选择上传实时更新完整解决方案
flutter
sunly_12 小时前
Flutter:showModalBottomSheet底部弹出完整页面
开发语言·javascript·flutter
AskHarries12 小时前
Google 登录问题排查指南
flutter·ios·app
5008415 小时前
鸿蒙 Flutter 分布式硬件调用:跨设备摄像头 / 麦克风共享
分布式·flutter·华为·electron·wpf·开源鸿蒙
sunly_15 小时前
Flutter:页面级动画弹出
flutter