记录flutter---按钮修改样式

187 阅读1分钟

首先吐槽一下,并不少多有的padding都是通过EdgeInsets进行定义的,比如按钮中的padding就是通过MaterialStateProperty,贼麻烦。看下按钮的属性吧,带备注的是我目前遇到的。。碰见再更新。。。

const ButtonStyle({
    this.textStyle,//文字样式
    this.backgroundColor,//背景色
    this.foregroundColor,//前景色
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,//padding
    this.minimumSize,
    this.fixedSize,
    this.maximumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
    this.alignment,
    this.splashFactory,
  });

首先上代码和图片,又是逼疯的一天。。 这是一个带图标的按钮,结构清晰明聊

image.png

OutlinedButton.icon(
           style: ButtonStyle(
                alignment: Alignment.centerLeft,
                backgroundColor:Color.fromRGBO(235, 237, 241, 1)
                //这是重点
                padding: MaterialStateProperty.all
                (const EdgeInsets.only(left: 12))
                ),
          icon: const Icon(
                Icons.add,
                size: 12,
                ),
          label: Text(
                data["text"].toString(),
                style: const TextStyle(
                       fontSize: 12, color: Colors.black
                       ),
                ),
          onPressed: () {},
 ),