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 天前
从短剧App的bug看响应式编程在AI时代的优势
flutter·ai编程·跨平台开发
传奇开心果编程1 天前
【Flutter踩坑排雷】第7课:巨型 build 函数坑|全部 UI 写在同一个 build,维护难、隐性异常
android·flutter·ios·移动开发·跨平台·dart·声明式ui
程序员老刘2 天前
从短剧App的bug看响应式编程在AI时代的优势
flutter·ai编程·客户端
恋猫de小郭2 天前
最近 Android 有什么更新:Android Dev Summit 2026 技术解读
android·前端·flutter
好的佩奇2 天前
Dart 之类修饰符
android·flutter·dart
好的佩奇013 天前
Dart 之类修饰符
android·flutter·dart
Jewel1053 天前
文字为什么总是不居中!记录一个bug
android·flutter·ios
2601_949847754 天前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
stereohomology4 天前
Solomd抖动问题扩展方式解决:多LLM合作,DSV4.1flash收尾
extension·solomd
大龄秃头程序员4 天前
Flutter 中我为什么把 GetX 定位为高效率方案,而不是默认架构方案
flutter