Flutter组件封装：自定义较强的渐变色按钮（适合大量不同颜色的渐变色按钮，命名格式有点怪可自行修改）

原创已于 2023-04-04 18:03:58 修改 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #开发语言 #android

于 2023-04-03 13:26:01 首次发布

该代码段展示了一个在Flutter中实现的自定义Yhh_Button组件，它是一个无状态Widget，支持设置宽度、高度、圆角、字体、字体大小、颜色渐变等属性。按钮使用线性渐变背景，并在按下时透明度有变化，文本样式可定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 渐变色按钮组件
class Yhh_Button extends StatelessWidget {
  final double width;
  final double height;
  final double radius;
  final String font;
  final double fontsize;
  final FontWeight? fontWeight;
  final Color? fontColor;
  final Alignment begin;
  final Alignment end;
  final void Function()? event;
  final List<Color>? colors;

  const Yhh_Button(
      {super.key,
      required this.width,
      required this.height,
      required this.radius,
      required this.font,
      required this.fontsize,
      this.fontWeight,
      this.fontColor,
      required this.begin,
      required this.end,
      this.event,
      this.colors});

  @override
  Widget build(BuildContext context) {
    final haveWeight = fontWeight ?? 13;
    final havaColors = colors ??
        const [
          Color.fromRGBO(7, 236, 254, 0.69),
          Color.fromRGBO(21, 224, 254, 0.69),
          Color.fromRGBO(105, 197, 251, 0.69),
        ];
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(radius)),
          gradient: LinearGradient(begin: begin, end: end, colors: havaColors)),
      child: ElevatedButton(
        style: ButtonStyle(
            elevation: MaterialStateProperty.all(0),
            backgroundColor: MaterialStateProperty.all(Colors.transparent),
            shape: MaterialStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(radius)))),
        onPressed: event,
        child: Text(
          font,
          style: TextStyle(
              fontSize: fontsize, fontWeight: haveWeight, color: fontColor),
        ),
      ),
    );
  }
}