Flutter中Widget实现方式

贺公子之数据科学与艺术

发布于 2025-12-18 09:02:19

1180

组合方式自定义Widget

在Flutter中，通过组合基础Widget实现自定义控件是常见做法。将多个基础Widget按布局规则组装成高级控件，能显著提升代码复用性。

定义数据结构存储控件所需信息：

class UpdateItemModel {
  String appIcon;
  String appName;
  String appSize;
  String appDate;
  String appDescription;
  String appVersion;
  
  UpdateItemModel({
    this.appIcon, 
    this.appName,
    this.appSize,
    this.appDate,
    this.appDescription,
    this.appVersion
  });
}

垂直结构拆解

将UI分为上下两部分：

上半部分：包含图标、文字和按钮的水平布局
下半部分：包含描述信息的垂直布局

水平布局实现

上半部分使用Row布局：

Widget buildTopRow() {
  return Row(
    children: [
      Padding(
        padding: EdgeInsets.all(10),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(8.0),
          child: Image.asset(model.appIcon, width: 80, height: 80)
        )
      ),
      Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(model.appName, maxLines: 1),
            Text(model.appDate, maxLines: 1)
          ],
        ),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
        child: FlatButton(
          child: Text("OPEN"),
          onPressed: onPressed,
        )
      )
    ]
  );
}

底部布局实现

下半部分使用Column布局：

Widget buildBottomRow() {
  return Padding(
    padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(model.appDescription),
        Padding(
          padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
          child: Text("${model.appVersion} • ${model.appSize} MB")
        )
      ]
    )
  );
}

完整控件组装

将上下部分组合成完整控件：

class UpdatedItem extends StatelessWidget {
  final UpdateItemModel model;
  final VoidCallback onPressed;

  UpdatedItem({Key key, this.model, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        buildTopRow(),
        buildBottomRow()
      ]
    );
  }
}

自绘方式自定义Widget

当需要实现特殊绘制效果时，可通过CustomPainter进行自定义绘制：

class CustomCirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    
    canvas.drawCircle(
      Offset(size.width/2, size.height/2),
      size.width/2,
      paint
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class CustomCircle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(100, 100),
      painter: CustomCirclePainter(),
    );
  }
}

布局优化技巧

使用SizedBox控制控件尺寸：

SizedBox(
  width: 100,
  height: 100,
  child: CustomCircle()
)

使用AspectRatio保持宽高比：

AspectRatio(
  aspectRatio: 1,
  child: Container(color: Colors.red)
)

性能注意事项

避免在build方法中创建大量对象使用const构造函数优化性能考虑使用RepaintBoundary隔离重绘区域

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-12-15，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Flutter中Widget实现方式

Flutter中Widget实现方式

组合方式自定义Widget

垂直结构拆解

水平布局实现

底部布局实现

完整控件组装

自绘方式自定义Widget

布局优化技巧

性能注意事项

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐