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,
            onClick: (){
              print("点击事件");
            })

是的，跟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.transparent;
  AlignmentGeometry? alignment = Alignment.center;
  double? cornerRadius = 0;
  double? borderWidth = 0;
  Color? borderColor = Colors.transparent;
  String content = "";
  bool? singleLine = false;
  bool? isBold = false;
  VoidCallback? onClick;

  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,
      this.onClick}) {
    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;
      }
    }

    if (onClick == Null) {
      onClick = () {};
    }
  }

  @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.transparent),
          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: GestureDetector(
          onTap: this.onClick,
          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),
          ),
        ));
  }
}