flutter 常用组件的功能清单

最新推荐文章于 2024-06-25 09:30:47 发布

NO Exception?

最新推荐文章于 2024-06-25 09:30:47 发布

阅读量663

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/chentaishan/article/details/104236170

版权

Flutter 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

倒计时

 Future.delayed(Duration(seconds: 3), () {
      Navigator.push(context, MaterialPageRoute(builder: (context) {
        return SplashScreen();
      }));
    });

From 表单组件

允许用户输入内容，下拉列表，单选、多选。
表单元素：
TextFromField

ListView 列表组件

listview
listview.builder 长列表组件
GridView 网格

属性：
scrollDirection 列表排列方向 Axis.vertical 竖向

Container 容器组件

key:标识符
alignment:child的对齐方式
padding
color
decoration:child后面的装饰

Drawer

AppBar

PopupMenuButton 选项菜单

BottomNavigationBar

ListView

UserAccountsDrawerHeader 侧滑头部

InkWell 水波纹点击事件

Expanded 充满控件

Divider 分割线

wrap 换行控件

IntroSlider 引导页

CircularProgressIndicator 圆形进度条

Chip 标签流式布局

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,
      )