flutter 常用组件的功能清单

1.MediaQuery

Establishes a subtree in which media queries resolve to the given data.
建立媒体查询解析给定的子树。

  • MediaQuery.removePadding:移除顶部内边距,用于处理刘海屏顶部内边距。

  • static MediaQueryData of 获取系统一些属性,返回的是MediaQueryData
    MediaQueryData包括了很多字段

accessibleNavigation → bool 用户是否使用TalkBack或VoiceOver等辅助功能服务与应用程序进行交互。
alwaysUse24HourFormat → bool 是否使用24小时格式。
boldText → bool 是否使用了粗体字体
devicePixelRatio → double 单位逻辑像素的设备像素数量
disableAnimations → bool 平台是否要求尽可能禁用或减少使用动画。
hashCode → int 此对象的哈希码
invertColors → bool 设备是否反转平台的颜色
orientation → Orientation 屏幕方向(横向/纵向)
padding → EdgeInsets 显示器的部分被系统UI部分遮挡,通常由硬件显示“凹槽”或系统状态栏
platformBrightness → Brightness 当前的亮度模式
size → Size 设备尺寸信息,如屏幕的大小,单位 pixels
textScaleFactor → double 每个逻辑像素的字体像素数
viewInsets → EdgeInsets 显示器的各个部分完全被系统UI遮挡,通常是设备的键盘
viewPadding → EdgeInsets 显示器的部分被系统UI部分遮挡,通常由硬件显示“凹槽”或系统状

如:我们想要获取widget的宽高

final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height; 

NotificationListener

通知(Notification)是Flutter中一个重要的机制,在widget树中,每一个节点都可以分发通知,通知会沿着当前节点向上传递,所有父节点都可以通过NotificationListener来监听通知。多用于监听列表的滚动事件。
NotificationListener对象里有个状态字段,有如下状态:

 onNotification: (notification){
    switch (notification.runtimeType){
      case ScrollStartNotification: print("开始滚动"); break;
      case ScrollUpdateNotification: print("正在滚动"); break;
      case ScrollEndNotification: print("滚动停止"); break;
      case OverscrollNotification: print("滚动到边界"); break;
    }
  },

RefreshIndicator

下拉刷新控件

		RefreshIndicator(
                    onRefresh: _handleRefresh,//下拉刷新触发的方法
                    child: _listview(),下拉的ui控件
                  ),

ClipRRect

A widget that clips its child using a rounded rectangle.
可以实现圆角效果

 borderRadius: BorderRadius.all(Radius.circular(11)),
          child: Container。。。

GridView

网络布局控件,如九宫格

		GridView(
                  scrollDirection: Axis.vertical,// 滚动方向
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 5,
                  ),

Swiper

banner轮播图样式
pagination 指示器

Swiper(
        itemCount: bannerList.length,
        autoplay: true,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () => {},
            child: Image.network(
              bannerList[index].icon,
              fit: BoxFit.fill,
            ),
          );
        },
        pagination: SwiperPagination(),
      ),

LinearGradient

线性渐变LinearGradient

Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              //AppBar渐变遮罩背景
              colors: [Color(0x66000000), Colors.transparent],
              begin: Alignment.topCenter,//开始位置
              end: Alignment.bottomCenter,// 结束位置
            ),
          ),

FractionallySizedBox

根据自身的宽高因子显示大小,如果没有设置宽高因子,最大化显示,也就是充满它的父布局。

new FractionallySizedBox(
      alignment: Alignment.topLeft,
      widthFactor: 1.5,
      heightFactor: 0.5,
      child: new Container(
        color: Colors.red,
      )
发布了69 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/chentaishan/article/details/104236170
今日推荐