Flutter构建自定义Widgets的全过程记录

目录
  • 一.组合widget实现
  • 二.通过自定义CustomPainter实现widgets
  • 三.饼状图piechart.dart代码展示
  • 四.实际效果图,eg:
  • 附:Flutter中父widget调用子widget的方法
  • 总结

一.组合widget实现

1.android和flutter自定义控件对比

Android中,一般会继承View或已经存在的某个控件,然后覆盖draw方法来实现自定义View。在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,而不是继承。下面看看如何构建持有一个label的CustomButton。这是通过将Text与RaisedButton组合来实现的,而不是继承RaisedButton并重写其绘制方法实现,eg :custombuttontest.dart

import 'package:flutter/material.dart';

class CustomButtonTest extends StatelessWidget{
  final String textStr;
  CustomButtonTest(this.textStr);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){},
      child: Text(
        textStr,
        textAlign: TextAlign.center,
      )
    );
  }

}

上面定义好组件之后,可直接在调用build的方法中现实,eg :

@override
  Widget build(BuildContext context) {
    return new Center(
      child: new CustomButton("Custom Button"),
    );
  }
}

二.通过自定义CustomPainter实现widgets

1.CustomPainter主要属性介绍,和Android开发中的自定义View类似,Flutter中的绘制也是依靠Canvas和Paint来实现的

1).Canvas //画布,为开发者提供了点、线、矩形、圆形、嵌套矩形等绘制方法。

2).Paint //画笔,可以设置抗锯齿,画笔颜色,粗细,填充模式等属性,绘制时可以定义多个画笔以满足不同的绘制需求。eg:

Paint _paint = new Paint()
..color = Colors.red // 画笔颜色
..strokeCap = StrokeCap.round //画笔笔触类型,包括(1.round-画笔笔触呈半圆形轮廓开始和结束;2.butt-笔触开始和结束边缘平坦,没有外延;3.square-笔触开始和结束边缘平坦,向外延伸长度为画笔宽度的一半)
..isAntiAlias = true //是否启动抗锯齿
..style=PaintingStyle.fill //绘画风格,默认为填充,有fill和stroke两种
..blendMode=BlendMode.exclusion //颜色混合模式
..colorFilter=ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion)//颜色渲染模式
..maskFilter=MaskFilter.blur(BlurStyle.inner, 3.0)//模糊遮罩效果
..filterQuality=FilterQuality.high//颜色渲染模式的质量
..strokeWidth = 15.0;//画笔的宽度复制代码

3).Offset //坐标,可以用来表示某个点在画布中的坐标位置。

4).Rect //矩形,在图形的绘制中,一般都是分区域绘制的,这个区域一般都是一个矩形,在绘制中通常使用Rect来存储绘制的位置信息。

5).坐标系 //在Flutter中,坐标系原点(0,0)位于左上角,X轴向右变大,Y轴向下变大。

2.painting.dart中的主要方法,eg:

void drawRect(Rect rect, Paint paint) {...} //画矩形
void drawLine(Offset p1, Offset p2, Paint paint) {...} //画线
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint) {...} //画点
void drawCircle(Offset c, double radius, Paint paint) {...} //画圆
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) {...} //画圆弧

三.饼状图piechart.dart代码展示

import 'dart:math';
import 'package:flutter/material.dart';

class PieChartTest extends StatelessWidget{
  const PieChartTest({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('pie chart'),
      ),
      body:Container(
        alignment: Alignment.center,
        child: CustomPaint(
          size: const Size(300, 300),
          painter: PieChartPainter(),
        ),
      )
    );
  }
}

class PieChartPainter extends CustomPainter{

  Paint getColoredPaint(Color color){
    Paint paint=Paint();
    paint.color=color;
    return paint;
  }

  @override
  void paint(Canvas canvas, Size size) {
    double wheelSize=min(size.width, size.height)/2;
    double nbElem=8;
    double radius=(2*pi)/nbElem;
    Rect boundingRect=Rect.fromCircle(center: Offset(wheelSize,wheelSize), radius: wheelSize);
    canvas.drawArc(boundingRect, 0, radius, true, getColoredPaint(Colors.orange));
    canvas.drawArc(boundingRect, radius, radius, true, getColoredPaint(Colors.black));
    canvas.drawArc(boundingRect, radius*2, radius, true, getColoredPaint(Colors.green));
    canvas.drawArc(boundingRect, radius*3, radius, true, getColoredPaint(Colors.red));
    canvas.drawArc(boundingRect, radius*4, radius, true, getColoredPaint(Colors.blue));
    canvas.drawArc(boundingRect, radius*5, radius, true, getColoredPaint(Colors.yellow));
    canvas.drawArc(boundingRect, radius*6, radius, true, getColoredPaint(Colors.purple));
    canvas.drawArc(boundingRect, radius*7, radius, true, getColoredPaint(Colors.white));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate)=>oldDelegate!=this;
}

四.实际效果图,eg:

附:Flutter中父widget调用子widget的方法

一、定义globalKey,注意<>中的是State类。

final _childWidgetKey = GlobalKey();

二、在父页面初始化子widget

ChildPage(key:_receiveKey),

三、

class ChildPage extends StatefulWidget {undefined
ChildPage({Key key}) : super(key: key);
​​​​​​​@override
ChildPageState createState() => ChildPageState();
}

四、在父界面调用子widget中的方法

_childWidgetKey.currentState.onRefresh();

总结

到此这篇关于Flutter构建自定义Widgets的文章就介绍到这了,更多相关Flutter构建自定义Widgets内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter构建自定义Widgets的全过程记录

    目录 一.组合widget实现 二.通过自定义CustomPainter实现widgets 三.饼状图piechart.dart代码展示 四.实际效果图,eg: 附:Flutter中父widget调用子widget的方法 总结 一.组合widget实现 1.android和flutter自定义控件对比 Android中,一般会继承View或已经存在的某个控件,然后覆盖draw方法来实现自定义View.在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,而不是继承.下

  • Android Studio轻松构建自定义模板的步骤记录

    前言 之前其实有从鸿洋的文章有了解过AS的模板开发,一直想做一些自己经常使用的模板,以减少重复代码工作,但是发现太费劲了,所以一直搁置.然后昨天无意中发现了这个插件TemplateBuilder,然后学习了一下,基本掌握了这个插件的使用,以及快速构建自己的模板.下面来分享一下. 一.TempateBuilder插件安装 环境:Android Studio 3.1.1 方式1:AS内安装 方式2:本地安装 先去GitHub开源地址上下载插件压缩包,或者到JetBrains上的插件地址(要翻 墙哦)

  • 利用Vue Native构建移动应用的全过程记录

    目录 前言 Vue Native 的特性 声明式渲染 双向绑定 Vue.js 生态系统的丰富性 编译为 React Native 设置开发环境 创建一个Vue Native项目 Vue Native UI组件 视图组件 Image组件 TextInput组件 NativeBase UI 组件 双向数据绑定 导航和路由 状态管理 访问设备 API 总结 前言 Vue Native 是一个 JavaScript 框架,旨在使用 JavaScript 构建可以在 Android 和 iOS 上运行的跨

  • vite构建vue3项目的全过程记录

    目录 环境准备 创建项目 启动 总结 环境准备 安装最新版本 @vuejs/app yarn global add @vue/cli # OR npm install -g @vue/cli 升级到最新版本 @vitejs/app yarn global upgrade @vue/cli # OR npm update -g @vue/cli 查看 vue 版本 vue -V 兼容性注意 Vite 需要 Node.js 版本 >= 12.0.0. 故切换 node 版本,可查看该文章:使用 nv

  • Flutter实现自定义筛选框的示例代码

    目录 一.首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定. 二.定义筛选数据展示列表视图. 一.首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定. 1.在数据model中添加了一个selectedModel属性,用来记录当前已选择的筛选项(目前仅支持单选). 2.当按钮数量小于3个时,按钮最大宽度为屏幕宽度的1/3:小于屏幕宽度时,则为屏幕宽度/按钮数量. 具体代码如下: var text = model.selectedFilterModel !=

  • Flutter实现自定义搜索框AppBar的示例代码

    目录 介绍 效果图 实现步骤 完整源码 总结 介绍 开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录. 功能点: 搜索框.返回键.清除搜索内容功能.键盘处理. 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidge

  • Android Flutter实现自定义下拉刷新组件

    目录 前言 改造点 DIY下拉组件样式 刷新时机调整 效果展示 前言 在Flutter开发中官方提供了多平台的下拉刷新组件供开发者使用,例如RefreshIndicator和CupertinoSliverRefreshControl分别适配Android和iOS下拉刷新交互形态.但实际情况中这两者使用情况却不太相同在使用场景就存在差异,RefreshIndicator作为嵌套型下拉组件列表内容作为它的child使用而CupertinoSliverRefreshControl是嵌入在Sliver列

  • ASP.NET性能优化之构建自定义文件缓存

    现在,借助于.NET4.0中的OutputCacheProvider,我们可以有多种选择创建自己的缓存.如,我们可以把HTML输出缓存存储到memcached分布式集群服务器,或者MongoDB中(一种常用的面向文档数据库,不妨阅读本篇http://msdn.microsoft.com/zh-cn/magazine/gg650661.aspx).当然,我们也可以把缓存作为文件存储到硬盘上,考虑到可扩展性,这是一种最廉价的做法,本文就是介绍如果构建自定义文件缓存. 1:OutputCachePro

  • Mysql 5.5.56版本(二进制包安装)自定义安装路径步骤记录

    安装路径:/application/mysql-5.5.56 1.前期准备 mysql依赖 libaio yum install -y libaio 创建用户mysql,以该用户的身份执行mysql useradd -s /bin/false -M mysql 下载mysql二进制包并解压 cd /tools wget https://dev.mysql.com/get/Downloads/MySQL-5.5/mysql-5.5.56-linux-glibc2.5-x86_64.tar.gz t

  • Java并发编程中构建自定义同步工具

    当Java类库没有提供适合的同步工具时,就需要构建自定义同步工具. 可阻塞状态依赖操作的结构 复制代码 代码如下: acquir lock on object state;//请求获取锁 while(precondition does not hold){//没有满足前提条件    release lock;//先释放锁    wait until precondition might hold;//等待满足前提条件    optionlly fail if interrupted or tim

随机推荐