返回顶部
首页 > 资讯 > 移动开发 >Flutter实现Text完美封装
  • 922
分享到

Flutter实现Text完美封装

2024-04-02 19:04:59 922人浏览 薄情痞子
摘要

使用惯了Android的布局,对Flutter的组件和布局简直深恶痛绝啊,于是下定决心,一点一点封装Flutter的基础组件,今天封装的是Text组件,自认为封装的非常完美,完全可以

使用惯了Android的布局,对Flutter的组件和布局简直深恶痛绝啊,于是下定决心,一点一点封装Flutter的基础组件,今天封装的是Text组件,自认为封装的非常完美,完全可以用android布局的写法来写Text了,而且可以直接设置margin,padding,color,font,等等所有的属性,只需要一行代码就能实现,废话不多说,先看效果

我们可以看到,颜色,边框,圆角通通都设置完成了,还有其他的属性,就不都一一展示了,实现这个效果需要哪些代码呢?看下面


TextView(
            "自定义textview自定义textview自定义textview自定义textview自定义textview",
            backgroundColor: Colors.red,
            textColor: Colors.white,
            padding: 10,
            cornerRadius: 10,
            borderColor: Colors.yellow,
            borderWidth: 1,
            marginTop: 5,
            singleLine: false,
          )

是的,跟android布局的方法完全一样,再也不用嵌套container再也不要写什么style了!!!

具体的封装实体类如下,为了纪念android,我叫他TextView,具体属性参考代码里面,应该都很简单易懂吧


import 'package:flutter/material.dart';
 
class TextView extends StatelessWidget {
  double? padding = 0;
  double? margin = 0;
  double? paddingLeft = 0;
  double? paddingRight = 0;
  double? paddingTop = 0;
  double? paddingBottom = 0;
  double? marginLeft = 0;
  double? marginRight = 0;
  double? marginTop = 0;
  double? marginBottom = 0;
  double? fontSize = 0;
  Color? textColor = Colors.black;
  Color? backgroundColor = Colors.white;
  AlignmentGeometry? alignment = Alignment.center;
  double? cornerRadius = 0;
  double? borderWidth = 0;
  Color? borderColor = Colors.white;
  String content = "";
  bool? singleLine = false;
  bool? isBold = false;
 
  TextView(this.content,
      {this.textColor,
      this.backgroundColor,
      this.padding,
      this.paddingTop,
      this.paddingBottom,
      this.paddingRight,
      this.paddingLeft,
      this.cornerRadius,
      this.borderColor,
      this.borderWidth,
      this.marginBottom,
      this.marginLeft,
      this.marginRight,
      this.marginTop,
      this.margin,
      this.fontSize,
      this.singleLine,
      this.isBold}) {
    if (padding != null) {
      if (padding != null && padding! > 0) {
        paddingLeft = padding;
        paddingRight = padding;
        paddingBottom = padding;
        paddingTop = padding;
      }
    }
 
    if (margin != null) {
      if (margin != null && margin! > 0) {
        marginLeft = margin;
        marginTop = margin;
        marginRight = margin;
        marginBottom = margin;
      }
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(this.marginLeft ?? 0, this.marginTop ?? 0,
          this.marginRight ?? 0, this.marginBottom ?? 0),
      decoration: new BoxDecoration(
        border: new Border.all(
            width: this.borderWidth ?? 0,
            color: this.borderColor ?? Colors.white),
        color: this.backgroundColor,
        borderRadius:
            new BorderRadius.all(new Radius.circular(this.cornerRadius ?? 0)),
      ),
      padding: EdgeInsets.fromLTRB(this.paddingLeft ?? 0, this.paddingTop ?? 0,
          this.paddingRight ?? 0, this.paddingBottom ?? 0),
      child: Text(
        content,
        style: TextStyle(
            color: this.textColor,
            fontSize: this.fontSize ?? 14,
            fontWeight:
                this.isBold ?? false ? FontWeight.bold : FontWeight.nORMal,
            overflow: this.singleLine ?? false
                ? TextOverflow.ellipsis
                : TextOverflow.clip),
      ),
    );
  }
}

到此这篇关于Flutter完美封装Text的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Flutter实现Text完美封装

本文链接: https://lsjlt.com/news/158544.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter实现Text完美封装
    使用惯了android的布局,对Flutter的组件和布局简直深恶痛绝啊,于是下定决心,一点一点封装Flutter的基础组件,今天封装的是Text组件,自认为封装的非常完美,完全可以...
    99+
    2024-04-02
  • Flutter如何实现Text完美封装
    这篇文章主要介绍“Flutter如何实现Text完美封装”,在日常操作中,相信很多人在Flutter如何实现Text完美封装问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Flutter如何实现Text完美封装...
    99+
    2023-06-21
  • Flutter实现矩形取色器的封装
    前言 最近看插件库上少有的取色器大都是圆形的或者奇奇怪的的亚子,所以今天做两个矩形的颜色取色器 提示:以下是本篇文章正文内容,下面案例可供参考 一、BarTypeColorPicke...
    99+
    2024-04-02
  • Flutter学习LogUtil封装与实现实例详解
    目录一. 为什么要封装打印类二. 需要哪些类三. 打印输出的抽象类四. 格式化日志内容格式化堆栈堆栈裁切工具类格式化堆栈信息格式化JSON五. 需要用到的常量六. 为了控制多个打印器...
    99+
    2024-04-02
  • Flutter之Dio封装+实例(自己梳理)
    参考链接 https://github.com/cfug/dio/blob/main/dio/README-ZH.md 添加依赖  手动添加到pubspec.yaml: dependencies: dio: ^替换为最新版本 在终端使用以...
    99+
    2023-10-26
    flutter
  • 【Flutter】Flutter 实现 Text 自动换行 解决长文本溢出问题
    文章目录 一、前言二、Flutter Text 组件简介三、Flutter Text 自动换行的重要性四、Flutter Text 自动换行的实现五、Flutter Text 自动换行的高级应...
    99+
    2023-09-23
    flutter javascript 前端 原力计划
  • Flutter中网络框架dio的二次封装怎么实现
    这篇文章主要介绍“Flutter中网络框架dio的二次封装怎么实现”,在日常操作中,相信很多人在Flutter中网络框架dio的二次封装怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Flutter中网...
    99+
    2023-06-30
  • 【Flutter】Flutter Text 控件实现下划线、删除线、虚线、加粗、斜体
    文章目录 一、前言二、Flutter Text 控件简介三、Flutter Text 控件的样式设置1. 设置下划线2. 设置删除线3. 设置虚线4. 设置加粗5. 设置斜体 四、完整代...
    99+
    2023-09-12
    flutter 前端 android ios 原力计划
  • Flutter实现编写富文本Text的示例代码
    目录SuperText富文本设计方案RichText原理方案设计解析代码设计节点定义Span构造器定义SuperText定义可以修改TextStyle的Span构造器效果展示结语Su...
    99+
    2022-11-13
    Android Flutter富文本 Android 富文本 Flutter 富文本
  • Vue实现Dialog封装
    目录Vue2 写法 Vue3 插件版写法 Vue3 动态组件写法 一些比较 hack 的写法 在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单,常用的交互就是把表单以...
    99+
    2024-04-02
  • Ajax如何实现封装
    小编给大家分享一下Ajax如何实现封装,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!之前是点击按钮取出新闻,现在要实现每隔一段事...
    99+
    2024-04-02
  • Vueecharts封装实现流程
    将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是js...
    99+
    2023-01-05
    Vue echarts封装 Vue echarts Vue 封装echarts
  • Vue封装全局toast组件的完整实例
    目录前言 一. 借助 vue-cli 1. 定义 Toast 组件2. 在 main.js 里面配置3. 在其他组件内使用二、不借助 vue-cli 1. 注册 toast 组件2....
    99+
    2024-04-02
  • 教你用java完美封装微信模板消息的发送动态
    目录导入maven依赖模板实例实体类代码RemarkMiniprogram //小程序相关数据,无小程序可以不填,或者填充空串Keyword,中间keyword部分First 首个数...
    99+
    2024-04-02
  • C#如何实现SQL封装
    这篇文章给大家分享的是有关C#如何实现SQL封装的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。SQLHelper.as , 代码如下:using System; usi...
    99+
    2024-04-02
  • vue实现计算器封装
    本文实例为大家分享了vue实现计算器封装代码,供大家参考,具体内容如下 前言:根据计算器可增添加减乘除的封装可扩展,大家请参照效果如下: 文件目录 我们导入了四个js包,在下面有...
    99+
    2024-04-02
  • Vue如何实现Dialog封装
    本篇内容主要讲解“Vue如何实现Dialog封装”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何实现Dialog封装”吧!在写业务的时候很常见的一个场景...
    99+
    2024-04-02
  • js如何实现封装jQuery
    这篇文章将为大家详细讲解有关js如何实现封装jQuery,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。本文js实现了下面jquery的几种方法,我将它分为8个小目标实现$(".box1"...
    99+
    2023-06-14
  • Next.js脚手架完整搭建封装实例分析
    这篇文章主要介绍“Next.js脚手架完整搭建封装实例分析”,在日常操作中,相信很多人在Next.js脚手架完整搭建封装实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Next.js脚手架完整搭建封装实...
    99+
    2023-06-30
  • Spring使用AOP完成统一结果封装实例demo
    目录Spring使用AOP完成统一结果封装Demo实现Spring使用AOP完成统一结果封装 起因:自己写项目的时候忍受不了每个方法都要写一个retrun Result.succes...
    99+
    2023-02-06
    Spring使用AOP统一结果封装 Spring统一结果封装 Spring AOP封装
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作