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),
    );
  }
相关推荐
白茶三许1 小时前
关于Flutter版本过低导致鸿蒙虚拟机启动失败的问题解决
flutter·开源·harmonyos·openharmony
消失的旧时光-194314 小时前
Flutter 与 React/Vue 为什么思想一致?——声明式 UI 体系的深度对比(超清晰版)
vue.js·flutter·react.js
rainboy18 小时前
Flutter :自己动手,封装一个小巧精致的气泡弹窗库
前端·flutter·github
旧时光_19 小时前
第4章:布局类组件 —— 4.5 流式布局(Wrap、Flow)
flutter
程序员老刘20 小时前
Flutter 3.38 版本更新:客户端开发者需要关注这三点?
flutter·客户端
AskHarries1 天前
RevenueCat 接入 Google Play 订阅全流程详解(2025 最新)
android·flutter·google
不凡的凡1 天前
flutter 管理工具fvm
flutter·harmonyos
消失的旧时光-19431 天前
我如何理解 Flutter 本质
android·前端·flutter
旧时光_2 天前
第4章:布局类组件 —— 4.8 LayoutBuilder、AfterLayout
flutter
A懿轩A2 天前
Flutter:跨平台开发终极指南
flutter