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),
    );
  }
相关推荐
秋月华星2 小时前
【flutter】TextField输入框工具栏文本为英文解决(不用安装插件版本
前端·javascript·flutter
程序员老刘·2 小时前
Flutter开发者 3.29版本关注要点
flutter·跨平台开发·客户端开发
weixin_460783875 小时前
Flutter解决TabBar顶部页面切换导致页面重载问题
android·javascript·flutter
火柴就是我11 小时前
flutter rust bridge 编译成so 文件 或者 .a文件 依赖到主项目
flutter·ios·rust
pengyu12 小时前
系统化掌握Flutter组件之Transform:空间魔法师
android·flutter·dart
坚果的博客13 小时前
鸿蒙版Flutter快递查询助手
flutter·华为·harmonyos
晴天学长14 小时前
一个多功能的GetX 项目代码生成工具
前端·flutter
蜡笔小新..15 小时前
Windows下配置Flutter移动开发环境以及AndroidStudio安装和模拟机配置
windows·flutter
顾林海17 小时前
深入理解 Dart 函数:从基础到高阶应用
android·前端·flutter
A0微声z18 小时前
从0到1掌握Flutter(二)环境搭建与认识工程
flutter