Flutter 扩展函数项目实用之封装SizedBox

这篇具有很好参考价值的文章主要介绍了Flutter 扩展函数项目实用之封装SizedBox。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flutter里扩展函数可以用简化代码写法,关键字为extension,伪代码写法如下:

extension 扩展类名 on 扩展类型 {
  //扩展方法
}

在Flutter页面里实现控件间距会常用到SizedBox,可使用扩展函数封装来达到简化代码的目的,基本步骤如下:

1、创建num_extension.dart文件,扩展类名为SizedBox+类型Double+后缀Extension,代码如下:

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、使用示例对照,节选代码如下:文章来源地址https://www.toymoban.com/news/detail-617545.html

  ///此为不使用扩展函数的写法
  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),
    );
  }

到了这里,关于Flutter 扩展函数项目实用之封装SizedBox的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter dio 请求封装(空安全)

    2024年02月06日
    浏览(57)
  • Flutter Dio 库的简单封装

    dio 库Flutter 中是比较流行的网络请求库。 其中在拦截器可以拦截请求,响应以及错误 权限验证:比如接口请求后端返回401未授权时可以跳到登录页,403跳到未授权页面; 异常监控:可以在拦截器处理异常,并且上报到异常监控后台或者发送异常预警消息; 缓存接口:可以对

    2024年02月11日
    浏览(53)
  • Flutter 缩放动画组件封装与使用

    在 Flutter 中,动画是为了提升用户体验而不可或缺的一部分。在应用程序中,缩放动画是常用的一种交互效果,可以使界面元素在用户交互时具有生动感。为了更好地组织代码和提高复用性,我们可以封装一个缩放动画组件,以下是一个简单的封装示例: 在使用缩放动画组件

    2024年01月19日
    浏览(41)
  • 9 个实用的 VSCode 扩展插件,让你的开发工作更轻松

    这些扩展将帮助您提高工作效率、改进工作流程 VSCode 是几乎所有编程语言中最受欢迎的 IDE 之一。它简单、强大,有很多很酷的特性,而且是微软的产品。所以对于任何开发人员来说,它都是一个很棒的工具。 通过安装其市场上可用的各种免费扩展,可以自定义 VS Code 并使

    2023年04月20日
    浏览(56)
  • 把Flutter扩展到微信小程序端的探索

    Flutter是声明式UI框架,声明式UI只需要向框架描述UI长什么样子而不用关心框架具体的实现细节,具体到Flutter,上层的UI描述使用底层的skia图形引擎处理就是原生Flutter,而把底层处理换成html/css/canvas就是flutter_web,flutter_mp则是探索在类小程序上对这些UI描述的处理。 我们看一

    2024年04月28日
    浏览(35)
  • Flutter之Dio封装+实例(自己梳理)

    https://github.com/cfug/dio/blob/main/dio/README-ZH.md  手动添加到pubspec.yaml: 在终端使用以下命令: dio 是一个强大的 HTTP 网络请求库,支持全局配置、Restful API、FormData、拦截器、 请求取消、Cookie 管理、文件上传/下载、超时、自定义适配器、转换器等。 单例模式详见:Flutter之单例模式

    2024年02月08日
    浏览(90)
  • Flutter控件之Tab选项卡封装

    Tab选项卡,这是一个非常常见且权重很高的一个组件,随便打开一个App,比如CSDN,如下图,首页顶部就是一个Tab选项卡,这个功能可以说,几乎每个App都会存在。 在Android中,我们可以使用TabLayout+ViewPager,轻松的实现一个Tab指示器+页面滑动,而在Flutter当中呢,可以很负责任

    2024年02月05日
    浏览(34)
  • flutter 封装webview和使用本地网页

    最先看到flutter_webview_plugin 用法特别简单 flutter_webview_plugin | Flutter Package Plugin that allow Flutter to communicate with a native Webview. https://pub-web.flutter-io.cn/packages/flutter_webview_plugin 缺点: 没有实现js sdk的功能 没有办法 使用JavaScriptChannel 的功能 后面使用webview_flutter webview_flutter | Flutter

    2024年03月26日
    浏览(52)
  • python中的类class: 继承、覆盖、重写、重载、扩展、多态、封装

    使用  class  创建类。类中有方法、属性。 1.1 __init__() 函数 类的内置  __init__()  函数。所有类都有一个名为 __init__() 的函数,它在启动类时执行。 使用 __init__() 函数将值赋给对象属性,或者在创建对象时需要执行的其他操作。 每次使用类创建新对象时,都会 自动调

    2024年02月08日
    浏览(49)
  • Flutter实用工具Indexer列表索引和Search搜索帮助。

    1.列表索引 效果图: indexer.dart indexer_util.dart 上面的只是帮助类,帮助数据分组和索引,界面的分组和展示需要自己布局实现。 2.搜索帮助 search_able.dart search_util.dart

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包