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),
    );
  }
相关推荐
消失的旧时光-19436 小时前
Flutter 异步进阶:Isolate 与 compute 的性能优化实践
flutter
nicepainkiller7 小时前
Flutter Loading 的封装
flutter
Bigger9 小时前
🚀 Flutter iOS App 上架 App Store 全流程(图文详解)
flutter·ios·app
_大学牲13 小时前
Flutter 之魂 Dio🔥:四两拨千斤的网络库
前端·数据库·flutter
HuWentao13 小时前
如何创建自我更新的通用项目脚本
前端·flutter
QuantumLeap丶18 小时前
《Flutter全栈开发实战指南:从零到高级》- 08 -导航与路由管理
flutter·ios·dart
折翅鵬21 小时前
Flutter兼容性问题:Could not get unknown property ‘flutter‘ for extension ‘android‘
android·flutter
Zender Han1 天前
Flutter 状态管理详解:深入理解与使用 Bloc
android·flutter·ios
技术男2 天前
flutter中怎么局部刷新
flutter
恋猫de小郭2 天前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter