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),
    );
  }
相关推荐
SoaringHeart5 小时前
Flutter组件封装:翻转组件 NFlipCard
前端·flutter
明君879978 小时前
说说我为什么放弃使用 GetX,转而使用 flutter_bloc + GetIt
前端·flutter
程序员老刘9 小时前
Flutter版本选择指南:3.41开始进入稳定区间 | 2026年3月
flutter·ai编程·客户端
王码码203510 小时前
Flutter 三方库 sparky 的鸿蒙化适配指南 - 实现极简 2D 游戏引擎功能、支持高效精灵图渲染与跨端游戏逻辑
flutter·harmonyos·鸿蒙·openharmony
恋猫de小郭11 小时前
Android 17 新适配要求,各大权限进一步收紧,适配难度提升
android·前端·flutter
tangweiguo0305198711 小时前
Flutter SSE 流式接收完全指南:从原理到实战
flutter
西西学代码13 小时前
Flutter---文件存储
flutter
林九生14 小时前
【Flutter】Flutter 拍照/相册选择后无法显示对话框问题解决方案
前端·javascript·flutter
●VON14 小时前
Flutter组件通信详解:父子组件交互的最佳实践
javascript·flutter·华为·交互·harmonyos·von