专栏首页小黑娃HenryFlutter-常用组件(持续更新)Flutter-常用组件(持续更新)题纲:注:

Flutter-常用组件(持续更新)Flutter-常用组件(持续更新)题纲:注:

题纲:

  1. SizedBox
  2. WillPopScope拦截、监听返回事件
  3. GestureDetector手势监听
  4. RawGestureDetector手势监听
  5. RefreshIndicator上拉加载、下拉刷新控件
  6. Drawer-抽屉

1.SizedBox

const SizedBox({ 
Key key, 
this.width, 
this.height, 
Widget child }): super(key: key, child: child);

相当于iOS开发中的给定尺寸的UIView。根据文档中的解释该控件会限制子控件的大小如果子控件允许的话。尤其是控件本身不好控制大小,则可以使用该控件来控制大小,列如:CircleAvatar。

2.WillPopScope拦截、监听返回事件

初始化方法,其中onWillPop参数类型是一个Future<bool>的方法. onWillPop该方法是可以实现安卓手机实体返回键的拦截、监听

const WillPopScope({
    Key key,
    @required this.child,
    @required this.onWillPop,
  }) : assert(child != null),
       super(key: key);
  final Widget child;
  final WillPopCallback onWillPop;
  
  typedef WillPopCallback = Future<bool> Function();
//举个栗子
final _navKey = GlobalKey<NavigatorState>();
Future<bool>_onWillPop() async{
    final b = await _navKey.currentState.maybePop();
    //返回true:可以在主Router上返回
    //fasel: 拦截返回事件
    return Future.value(!b);
}

3.GestureDetector手势监听

类似于iOS中UIControl,监听各种手势交互。

GestureDetector(
        onTap: ()=>{ setState(()=>{ _active = !_active }) },
        onTapDown: (details) { 
        //参数details.globalPosition,代表指针和屏幕的绝对位置
          print(details.globalPosition);
          setState(()=>{ _hold = true }); 
        }
        onTapUp: (details)=>{ setState(()=>{ _hold = false }) },
        onTapCancel: ()=>{setState(()=>{ _hold = false }) },
        //使用时必须传一个widget。
        child: Container(
          alignment: Alignment.center,
          child: Text('GestureDetector'),
          width: 150,
          height: 150
        ),
)

详细的全类型手势可以参考: Ho0229-Flutter中的手势处理

4.RawGestureDetector手势监听

篇幅有点长单独记录了常用组件--RawGestureDetector

5.RefreshIndicator上拉加载、下拉刷新控件

final _scrollV = ScrollController();

@override void initState() {
    super.initState();
//为ScrollController增加监视者
    _scrollV.addListener(() {
      if (_scrollV.offset == _scrollV.position.maxScrollExtent && _scrollV.position.maxScrollExtent != 0.0) {
        loadMore();
      }
    });
}

{
    ...
child:RefreshIndicator(
    //触发刷新偏移距离
      displacement: 50,
    //触发刷新事件。返回值为Future
      onRefresh: dataInit,
      child: ListView.builder(
        controller: _scrollV,
        //增加物理碰撞效果
        physics: const AlwaysScrollableScrollPhysics(),
        itemCount: items.length,
        itemBuilder: (content,i){
          return ListTile(
            title: Text(items[i]),
          );
        },
      ),
    )
}

Future<void> dataInit() async{
    for(var i=0; i<15; i++){
      items.add('Item$i');
    }
    await Future.delayed((Duration(seconds: 2)), ()=>setState(()=>{ items }));
}

发现一个大神写的自定义下拉控件: 法的空间--Flutter 下拉刷新花式玩法

6.Drawer-抽屉

篇幅有点长就单独记录了:Drawer


注:

官方组件库

我会把一些自己使用过的、好用的组件整理到这里帮助自己学习和记忆。

传送门:

Flutter-汇总

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AS常用插件-持续更新

    AS主题+配置备份+Logcat颜色配置 AS插件-Android Drawable Importer AS插件-GsonFormat AS插件...

    小小工匠
  • Hadoop常见组件启动方式汇总(持续更新....)

    接触过大数据领域的朋友都知道,Hadoop生态系统十分的庞大,许多组件启动的方式也是不尽相同,今天博主抽空整理了一下大数据生态圈中常见组件的启动...

    大数据梦想家
  • OpenStack常用命令-持续更新

    Apache http服务状态查询 命令语句 systemctl status httpd.service

    院长技术
  • window常用命令(持续更新)

    1、netstat -ano 查看端口占用情况 可以根据PID到任务管理器中找到对应的进程

    程序员一一涤生
  • Oracle常用命令(持续更新)

    --2、开启最小补充日志记录(执行的DML操作会被记录下来) alter database add supplemental log data;

    程序员一一涤生
  • Linux常用命令(持续更新)

    程序员一一涤生
  • [Flutter]一些常用操作(持续更新...)

    给Container添加一个点击隐藏子widget TextField隐藏键盘的操作,加上去后发现没有用,点击空白处并不能收起键盘。给container添加一个...

    吴老师
  • saltstack 常用命令(持续更新中)

    saltstack 常用命令 salt -d //查看帮助文档 salt -d | grep service //查看service相关模块命令 salt '*...

    shaonbean
  • OpenStack常用命令---持续更新2

    3、查看keystone endpoint:keystone endpoint-list

    院长技术
  • adb常用命令(持续更新中)

    ADB 即 Android Debug Bridge,Android调试桥。ADB工作方式比较特殊,采用监听Socket TCP 端口的方式让IDE和Qemu通...

    无情剑客
  • Docker 常用命令收录 -- 持续更新

    Docker 常用命令收录 容器操作 docker build -t friendlyname . # 使用当前目录下的内容创建Dockerfile镜像文件 ...

    shaonbean
  • js常用函数集锦(持续更新)

    憧憬博客
  • jquery常用函数及技巧(持续更新)

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • Linux 的一些常用命令——持续更新

    注:使用scp命令要确保使用的用户具有可读取远程服务器相应文件的权限,否则scp命令是无法起作用的。

    Sheldon.Lee
  • eclipse中的常用快捷键(持续更新~~~)

    时间静止不是简史
  • iOS常用的正则表达式(持续更新)

    傅_hc
  • Linux 工作常用命令笔记(持续更新)

    sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出。sort命令既可以从特定的文件,也可以从stdin中获取输入。 语法:

    莫斯
  • 系统常用指标经验值(持续更新)

    张申傲
  • Git 常用命令总结,将会持续更新

    平常在windows电脑上使用Git Extensions 工具比较多,大部分的常用指令都可以通过点点点就可以完成。在mac电脑上的话使用sourcetree工...

    aehyok

扫码关注云+社区

领取腾讯云代金券