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),
    );
  }
相关推荐
风清云淡_A2 小时前
【Flutter3.8x】flutter从入门到实战基础教程(一):新建一个flutter项目
flutter
1001101_QIA2 小时前
Flutter 开发报错:Android cmdline-tools 缺失 环境排查与完整修复方案
android·flutter
SoaringHeart15 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
程序员老刘20 小时前
Flutter 3.44 有哪些变化?(官方blog完整翻译)
flutter·ai编程·客户端
山屿落星辰21 小时前
Flutter 企业级架构设计实战:Clean Architecture + 分层模块化 + 依赖注入全解析
flutter
山屿落星辰1 天前
Flutter 高级特性实战:动画、自定义绘制、平台通道与 Web 优化
前端·flutter
程序软件分享1 天前
2026旗舰版 Java+Flutter 期货微交易系统源码全开源多语言平台
flutter·交易所源码·微盘源码·微交易源码
飞龙14775657467501 天前
Flutter 安全存储插件全面解析:从入门到进阶
flutter
带带弟弟学爬虫__1 天前
dyAPP数据采集-个人主页、发布、搜索、评论
服务器·python·算法·flutter·java-ee·django