Flutter入门 -页面技巧

发布时间:2023-08-11 18:00

flutter沉浸式状态栏

SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
   SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

flutter设置沉浸式状态栏

获取屏幕的宽高

MediaQuery.of(context).size //一个包含宽度和高度的对象,单位是dp
flutter 获取屏幕宽度高度 通知栏高度等屏幕信息

点击水波纹效果

GestureDetector 使用点击无水波纹出现,InkWell可以实现水波纹效果。
flutter InkWell 设置水波纹点击效果详述

基本组件使用

按钮的使用

Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)

加载图片

flutter本地图片使用,

  1. 在文件夹存放图片,
  2. 在yaml中指定图片路径
  3. 在dart中使用
    https://www.jianshu.com/p/fb878254b393

text使用技巧

TextField去掉下划线

TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
          ),
        )

如何在flutter中为文本添加阴影?

使用BackdropFilter伪造阴影 :https://codeday.me/bug/20181125/423935.html

默认给text文字增加双下划线,比较丑,需要设置下

设置下装饰方式即可:https://blog.csdn.net/baidu_34120295/article/details/86496657

Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)

https://blog.csdn.net/chenlove1/article/details/83627831

常见布局

学习 Flutter常用布局组件
与Android中的帧布局,相对布局,线性布局,绝对布局,表格布局,

  • Stack(层叠控件) 类似FrameLayout
  • SizedBox 能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效

Flutter之SafeArea组件

顾名思义:安全区域,可以让此包裹的组件,展示在安全的位置,尤其针对刘海屏幕的上面和下面的处理,详细看下这个博客。
https://www.jianshu.com/p/c6320f61a9b7

Flutter之Offstage组件

控制child是否显示
当offstage为true,控件隐藏; 当offstage为false,显示;
当Offstage不可见的时候,如果child有动画等,需要手动停掉,Offstage并不会停掉动画等操作。
学习博客:https://www.jianshu.com/p/b877ee7b1748

flutter移动开发中的页面跳转和传值

https://my.oschina.net/u/248241/blog/1796503

flutter中的圆和圆角的设置

圆:有三种方式
圆角:有2中方式:

https://www.jianshu.com/p/b4085a1a5129

如果给单个控件设置阴影

//使用Material包裹
Material( 
	elevation: 5,//控制阴影大小
	shadowColor: Colors.red,//控制阴影的颜色
	borderRadius: BorderRadius.circular(40),//这个矩形的圆角度数
	child: TextFormField(
		...
	),
)

flutter column嵌套listview不能滚动的问题

在listview外面嵌套一个Expanded,或者一个container就可以了,
尺寸计算的问题,Expande就是listview有多大就有多大,container就是container多大listview就有多大,可以滚动

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号