flutter透明色,flutter 状态栏透明
Flutter 设置颜色Color透明度
color: Color(0xFF5e12a9)
站在用户的角度思考问题,与客户深入沟通,找到龙安网站设计与龙安网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖龙安地区。
00%=FF(不透明)
5%=F2
10%=E5
15%=D8
20%=CC
25%=BF
30%=B2
35%=A5
40%=99
45%=8c
50%=7F
55%=72
60%=66
65%=59
70%=4c
75%=3F
80%=33
85%=21
90%=19
95%=0c
100%=00(全透明)
参考原文链接:
Flutter踩坑之旅
记录下自己踩过的坑,怕忘了
一.TextField:
1.去掉输入数字的计数:decoration中的counterStyle: TextStyle(color: Colors.transparent).
2.去掉获取和失去焦点时边框改变颜色的效果:decoration内border: InputBorder.none,
3.去边框时设置BorderSide的width为0或color: Colors.transparent后依然存在边框时,需要设置为borderSide: BorderSide.none
4.设置背景色需要在decoration内 filled:true, fillColor: Colors.blue同时设置才会显示
二.Uint8List类型和string类型,Listint的转换
连续两次base64解码时,参数只能使用string类型,但是base64解码后是Uint8List类型,此时需要将Uint8List类型转换为string类型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';
Listint转Uint8List:读取接口时获取的数据是Listint的图片数据,想显示时需要转成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可
三.报错:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...
这是因为dio请求返回的数据默认是以json的格式读取的,而返回的数据是密文形式,需要修改dio的Options的responseType为ResponseType.PLAIN,这样返回的数据就以字符串形式处理.
四.去掉点击控件背景出现的水波纹效果,即去掉md的效果:
在main.dart的MaterialApp内的theme加上splashColor: Colors.transparent
五.布局去掉沉浸式效果和布局设置占满全屏却无效的问题
使用Scaffold的body的布局默认是沉浸式的,将状态栏一起包含了,可以通过在body后添加一层SafeArea即可.
布局设置double.infinity占满全屏高度却无效,大部分情况都是因为某一级的父布局的高度已经有了限制,所以设置充满屏幕只会充满父布局,有些widget默认是按内容填充类似wrap_content就会导致写布局的过程中自己没有限制高度但最后的布局不是自己想要的,可以给各个父布局设置不同背景颜色来查看是从哪儿开始被限制了高度来排查问题.
六.占满剩余空间,类似android的match_parent可以使用double.infinity
七.LinearProgressIndicator
1.LinearProgressIndicator设置进度值的颜色为单一颜色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))
2.给LinearProgressIndicator设置圆角:ClipRRect(
borderRadius:BorderRadius.circular(60.0),
child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),
)
八.Expanded:
1.若嵌套多层column且内容的高度都不确定需要占满剩余空间,需要每层的column的内容都嵌套一层expanded来申明每层都占满剩余的空间,否则最里面的内容层需要指定高度,不然会报错
九.Container设置最小/大宽度或高度:
constraints:BoxConstraints(minHeight:56),
十.滑动的widget嵌套:
1.解决滑动冲突:内层嵌套的滑动widget设置physics:NeverScrollableScrollPhysics()
2.解决滑动嵌套ui显示不出来或者报错,内层的滑动widget设置shrinkWrap:true
十一.使用multi_image_picker: ^4.3.4安卓运行报错Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"
1.需要android工程支持androidx,需要在android工程的gradle.properties内添加android.enableJetifier=true和android.useAndroidX=true并点击右上角的open for editing in android studio,运行成功后就可以了
十二.使用textfield时的文字ui总是很高
使用了maxlength且只是在textfield的InputDecoration设置counterStyle的颜色为透明使下面的计数文字消失会导致文字ui很高,counter的计数文字只是颜色是透明但依然在布局中占了位置所以导致文字很高,直接使用counterText:""即可
十三.使用ListView报错Vertical viewport was given unbounded height
需要将ListView放入Expanded内部
Flutter图表库fl_chart的使用解析(二)-折线图
附上开发环境:
折线图是一个 Widget,和普通 Widget一样声明即可:
LineChart 的构造参数是一个 LineChartData,其属性如下:
配置了三条线,所以 lineBarsData 对应的数组有三个元素。
看下 LineChartBarData 属性:
图表四个方向的边框,有总显示开关,决定是否显示和隐藏所有,如果开启,又想隐藏个别边框,需要设置透明色。
FlBorderData 对应边框信息,有两个参数, show 就是显示与隐藏的边框, border 是边框数据。
FlTitlesData 可以配置4条坐标轴,也有一个总开关,如果要显示坐标轴,就设为 true ,然后配置对应位置的数据:
每个位置对应的是 SideTitles ,设置如下:
标题是显示在坐标轴后面的文字标题,每个轴对应一个。
附上源码
标题名称:flutter透明色,flutter 状态栏透明
文章来源:http://pwwzsj.com/article/dsisphi.html