Flutter自定义Widget和使用方法

最新推荐文章于 2024-04-10 23:21:42 发布

Flutter编程指南

最新推荐文章于 2024-04-10 23:21:42 发布

阅读量2.7k

点赞数 2

分类专栏： Flutter 文章标签： Flutter Widget APP 跨平台技术应用开发

本文链接：https://blog.csdn.net/weixin_43499085/article/details/88842385

版权

本文详细介绍了Flutter中自定义Widget的两种方法：通过现有Widget组合和利用CustomPainter绘制。前者通过组合基础Widget实现通用组件，提高复用性；后者通过重写paint方法，实现自定义图形绘制，常见于图表类应用。文中以Icon和Text组合及柱状图为例，展示了自定义Widget的创建和使用过程。

摘要由CSDN通过智能技术生成

文章目录

前言

前面已经通过三个篇幅向大家介绍了Flutter原生提供的常用Widget和其使用方法，实际开发中我们会遇到一些特殊的需求或者规范一些常用的Widget作为基础UI组件来使用，这时我们就需要根据需求自定义Widget了。Flutter中的自定义Widget和安卓、iOS原生平台类似，可以使用现有Widget进行组合，也可以自己根据需求来绘制，下面分别对两种自定义Widget的实现和使用方法做详细介绍。

现有Widget组合自定义Widget

现有Widget组合即是根据前面所介绍的基础Widget根据需求来组合成一个通用的Widget，这样在使用过程中避免设置过多的属性，且增强其复用性。
比如，在实际开发中，我们经常会碰到一个Icon和一个标题组合而成的UI，且这个组合的区块可以处理点击事件，那么我们就可以根据现有Icon和Text widget组合成通用的类似UI组件。

首先创建一个单独的dart文件来实现该自定义Widget，比如命名为custom_combined_widget.dart。

import 'package:flutter/material.dart';

class CustomCombinedWidget extends StatefulWidget {

  final IconData iconData;
  final String title;
  final GestureTapCallback onTap;

  const CustomCombinedWidget({Key key, this.iconData, this.title, this.onTap}): super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return CustomCombinedWidgetState();
  }

}

class CustomCombinedWidgetState extends State<CustomCombinedWidget> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: this.widget.onTap,
      child: Column(
        children: <Widget>[
          Icon(this.widget.iconData, size: 45.0,),
          Text(this.widget.title == null ? "" : this.widget.title, style: TextStyle(fontSize: 14.0, color: Colors.black),),
        ],
      ),
    );
  }

}

上述代码中我们自定义了一个CustomCombinedWidget，这里面Icon的大小和标题的文本大小、颜色都是定好的，所以在使用时无法改变这些值，如果想在使用过程中改变这些值则需要从外部传值进来，比如标题的文本内容、icon和该Widget点击事件回调就是通过外部使用者传入的。

以上自定义Widget的使用方法如下：

//首先导入自定义Widget所在文件
import 'package:demo_module/custom_combined_widget.dart';

//在页面Widget中使用

class HomePageState extends State<HomePage> {
  String tips = '这里是提示';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义组合Widget'),