和尚前几天整理了以下 Canvas 的部分方法,今天和尚继续学习 Canvas 第二部分。
widthFactor ( 宽度因子 ) 和 heightFactor ( 高度因子 ) 用于控制该组件的宽高 , 类型为 double 浮点型 ;
Padding可以给其子节点添加填充(留白),和边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它的定义:
文章目录 一、Opacity 组件 二、ClipRRect 组件 三、Padding 组件 四、完整代码示例 五、相关资源 一、Opacity 组件 ---- Opacity 组件 : 用于修改组件透明度 ; class Opacity extends SingleChildRenderObjectWidget { const Opacity({ Key key, @required this.opacity, this.alwaysIncludeSemantics = fals
老孟导读:一个月前分享的《超过百万的StackOverflow Flutter 问题-第一期》受到很多朋友的喜欢,非常感谢大家的支持,在文章末尾有第一期的链接,希望此文能对你有所帮助。
material设计风格的卡片。卡片的边角和阴影有些调整。卡片是用于表示某些关联数据,例如集合,地理区域,膳食,联系方式等。卡片包含有关单个对象的内容和动作。
EdgeInsetsGeometry 是一个抽象类,开发中,我们一般都使用 EdgeInsets 类,他是 EdgeInsetsGeometry 的子类,定义了一下设置填充的方法
Flutter作为时下最流行的技术之一,凭借其出色的性能以及抹平多端的差异优势,早已引起大批技术爱好者的关注,甚至一些闲鱼,美团,腾讯等大公司均已开始使用。虽然目前其生态还没有完全成熟,但身靠背后的Google加持,其发展速度已经足够惊人,可以预见将来对Flutter开发人员的需求也会随之增长。
AppBar(title属性,Text组件; action:动作响应;!!!! titleSpacing:标题文字间距; toolbarOpacity:标题透明度;)
BorderDirectional和Border基本一样,区别就是BorderDirectional带有阅读方向,大部分国家阅读是从左到右,但有的国家是从右到左的,比如阿拉伯等。
上一节中,我们讲了 Flutter 中 Text 组件的一些用法以及 API,本节我们继续学习 Flutter 中的 Image 组件,同样先上图:
当输入框的默认线框无法满足时,可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线
和尚今天搭建了一个很丑的【签到】小页面,页面很简单,只有寥寥几个控件,但和尚想通过这个简单的小页面学习一下权重/比例的使用方式,顺便也学习了一下如何绘制圆形效果。
安装video_player,我安装的是最新的版本,请根据你自己的flutter版本去安装对应的版本,安卓可以直接使用虚拟机,IOS需要真机才可以播放。
Simulator Screen Shot - iPhone Xʀ - 2019-09-05 at 16.18.21.png
【pushAndRemoveUntil与pushNamedAndRemoveUntil区别】
第一层有原始指针事件,它描述了屏幕上指针(例如,触摸,鼠标和触控笔)的位置和移动。
经过上一篇文章的学习,我们大家可以了解到布局相关的组件,但是在实际开发中,我们还需要使用到其他的组件,比如按钮、图片、文本、输入框等等,这些组件都是我们在开发中经常使用的,所以本篇文章我们就来学习一下这些常用组件。
边框 border-image 设置所有边框图像的速记属性。 -border-image-source 用于指定要用于绘制边框的图像的位置 -border-image-sli ce 图像边界向内偏移 -border-image-width 图像边界的宽度 -border-image-outset 用于指定在边框外部绘制 border-image-area 的量 -border-image-repeat 用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。 border-
本文介绍Flutter中常用按钮控件,包括:MaterialButton 、RaisedButton 、FlatButton 、IconButton 、FloatingActionButton 、OutlineButton 、ButtonBar 、lButton.icon()。
在实际开发中,我们经常会遇到一些复杂的UI需求,往往无法通过使用Flutter的基本Widget,设置其属性参数来满足。这个时候,我们就需要针对特定的场景自定义Widget了。
ClipRect组件使用矩形裁剪子组件,通常情况下,ClipRect作用于CustomPaint 、 CustomSingleChildLayout 、 CustomMultiChildLayout 、 Align 、 Center 、 OverflowBox 、 SizedOverflowBox组件,例如ClipRect作用于Align,可以仅显示上半部分,代码如下:
和尚继续尝试 Flutter 的基本按钮;今天和尚学习 MaterialButton 系列相关 Button;该系列以 MaterialButton 为父类,衍生出 RaisedButton 凸起按钮,FlatButton 扁平按钮和 OutlineButton 边框按钮;可根据不同场景灵活运用;
经过上一篇文章,开发出来了第二个 Flutter 程序,接下来是给大家详细的介绍下 Flutter 的布局组件。
“热重载”机制极大的提高了我们的开发效率,也越来越受开发者青睐,这个词出现的频率也越来越高,他最初是前端开发中的概念,慢慢延伸到跨平台,甚至原生开发,比如Vuex、Flutter等,热重载这个机制非常好用。
flutter3_macOS基于flutter3+window_manager+getx构建客户端os系统程序。
今天将用Flutter的组件来实际布局演练一下,在此之前你需要熟悉Flex布局 1、微信条目的静态布局 这个平时非常常见,而且相对简单,所以是个练手的不错人选 简单分析一下:一共三块,用Row布局,
有时候我们为 Text 设置 ellipsis ,却发现并没有生效,而是出现如下图左边提示 overflowed 的警告。
相信大家见过这种使用场景,就是生成属于自己的二维码海报,可以保存到相册,分享出去。在社交电商类的App中比较常见。 这种懂原生知道,用原生实现简单,但Flutter中实现这种功能,没接触过的,就会无从下手。下面我们就来通过代码交流下。
AlertDialog 对话框组件 , 可设置标题 , 内容 , 等一系列对话框相关的设置 , 下面代码是 AlertDialog 的构造函数源码 ;
和尚在学习过程中发现仅通过设置 decoration 是无法改变 Container 内部 Widget 样式的,一般我们会通过 ClipX 方式进行裁剪;而一旦涉及到 Widget 的裁剪,对于基础样式,通常会采用 ClipOval / ClipRRect / ClipPath 等方式,对于稍加复杂的样式,一般通过自定义 CustomClipper 也可以满足;
Flutter 自带的基础动画组件称之为隐式动画组件,小小统计了一下,会有几十个那么多,包括通用的动画构建类、特定的动画效果类以及封装好的动画组件。这么多,好处是想用的基本都有,不好的地方是记不住,找起来也不太方便。本篇特地整理了 Flutter 的隐式动画组件,方便各位 Flutter 爱好者(搬砖者)随时查看和使用。
Widget 可理解为原生的UI元素 但不仅仅如此,Flutter中的widget概念更广泛,
走马灯是一种常见的效果,本文讲一下如何用 PageView 在 Flutter 里实现一个走马灯, 效果如下,当前页面的高度比其它页面高,切换页面的时候有一个高度变化的动画。实现这样的效果主要用到的是 PageView.builder 部件。
作为系列文章的第二十一篇,本篇将通过不一样的角度来介绍 Flutter Framework 的整体渲染原理,深入剖析 Flutter 中构成 Layer 后的绘制流程,让开发者对 Flutter 的渲染原理和实现逻辑有更清晰的认知。
然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。
我们应该都使用过 ClipXXX 相关的组件, 来实现一些 圆角矩形/圆形形状十分的方便,那如果想要实现一些奇形怪状的 Widget,例如 五角星/圆弧形之类的,那就只能用 ClipPath了。
1. onPressed 按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式;
Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来。
上篇: 又不是不能用-篇 本文源码Github 0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改
上篇: 又不是不能用-篇 本文源码Github 0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改,易复用 📷 ---- 0.2:要说的话 注意:本篇是对状态最基本的使用。虽然比较糙,但是并不代表不重要 后面两篇是基于此篇的优化,所以这篇一定要看懂,才能跟上我的思维。 效果如下,单从界面上来看,我还是比较满意的。 📷 ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事
接下来,我们需要配置设置。对于Android平台,不需要任何东西。对于 iOS,打开在 ios/Runner 文件夹下找到的 Info.plist 文件,然后添加以下键。
来看一下,定义三个按钮,分别对应,按钮不可点击,按钮可点击,按钮带有渐变背景,三种情况,效果如下:
在Flutter中,Container可以使用BoxDecoration来添加Shadow,如果是单独的Widget,可以通过DecoratedBox来添加阴影。
Material Components是Google官方对Material Deign的最佳实践,这个库试图在不同的Android版本中统一Material Design UI组件的外观和使用代码,当然也在不同的平台上统一这些组件(有针对iOS、web和Flutter的库的版本)。Material Components库还实现了新的Material Design规范中引入的功能。
毕竟前端出生,找(qi)到(shi)了(bing)感(mei)觉(ru)后(men),其实就是一个UI框架,只不过他的引擎基于C++,底层基于Skia渲染,DartVM虚拟机以及Text and so on…
领取专属 10元无门槛券
手把手带您无忧上云