Flutter记录

  • 文本 Text

    • softwrap 为true时文本行将在换行之前填充列宽

  • 横向 Row

    • MainAxisAlignment 横向对齐方式
    • CrossAxisAlignment 垂直对齐方式

  • 竖直 Column

    • MainAxisAlignment
      • MainAxisAlignment.spaceEvenly 等宽
    • CrossAxisAlignment
    • mainAxisSize

  • 容器，添加填充、边距、边框、背景颜色或其他装饰 Container

    • 如果不设置其宽高，将默认与父布局一致，但是如果它有一个孩子，那么他的大小和孩子一致
    • decoration
      • BoxDecoration
        • border
        • borderRadius

  • 权重布局 Expanded

  • 带主题的根布局 MaterailApp

  • 界面跳转 Navitator

  • 带AppBar的部件 Scaffold

    • AppBar
      • Leading
      • Title
      • Action
    • body

  • 点击事件 GestureDetector

    • onTop

  • 点击事件2 InkWell

  • 居中 Center

  • 图片 Image

  • 小图标 Icon

  • 可滚动列表 ListView

  • 限制宽高 SizeBox

  • 可滚动的网格 GridView

    • GridView.count允许您指定列数
    • GridView.extent允许您指定图块的最大像素宽度

  • 将最多 3 行文本以及可选的前导和尾随图标组织成一行 ListTile

  • 小卡片 Card

  • 遍历获取小部件集合的方式

    • List.generate(count, (i) => Container(child: Image.asset('images/pic$i.jpg')));

  • 可裁剪超出父布局的部件 ClipOval

  • 圆形头像 CircleAvatar

  • 添加分割线 Divider

  • 设置内边距 Padding

  • 根据宽高动态式布局 LayoutBuilder

  • 得到设备的大小，方向 MediaQuery

  • 响应式布局(可以设备情况更改布局)

    • AspectRatio 尝试将子项调整为特定的纵横比
    • CustomSingleChildLayout
    • CustomMultiChildLayout
    • FittedBox
    • FractionallySizedBox 百分比布局，根据父布局大小自动调节自身宽高
    • LayoutBuilder
    • MediaQuery
    • MediaQueryData
    • OrientationBuilder

  • 自适应布局

    • 单个子view
      • Align- 使孩子在自身内部对齐。对于垂直和水平对齐，它需要一个介于 -1 和 1 之间的双精度值。
      • AspectRatio— 尝试将子项调整为特定的纵横比。
      • ConstrainedBox- 对其子项施加大小限制，提供对最小或最大大小的控制。
      • CustomSingleChildLayout— 使用委托函数来定位单个子项。委托可以确定子级的布局约束和定位。
      • Expanded和 —允许orFlexible的子项 缩小或增长以填充任何可用空间。RowColumn
      • FractionallySizedBox— 将其子项调整为可用空间的一小部分。
      • LayoutBuilder— 构建一个可以根据其父级大小自行重排的小部件。
      • SingleChildScrollView- 将滚动添加到单个子项。通常与Row或一起使用Column。
    • 多个子view
      • Column, Row, and Flex— 在单个水平或垂直运行中布置子级。两者Column并Row扩展Flex小部件。
      • CustomMultiChildLayout— 在布局阶段使用委托函数定位多个子项。
      • Flow— 类似于CustomMultiChildLayout，但更有效，因为它是在绘制阶段而不是布局阶段执行的。
      • ListView, GridView, and CustomScrollView— 提供可滚动的子级列表。
      • Stack- 相对于Stack. 功能类似于 CSS 中的位置固定。
      • Table— 对其子项使用经典的表格布局算法，结合多行和多列。
      • Wrap- 在多个水平或垂直运行中显示其子项。

  • 调整设备密度 VisualDensity

    • 获取 Theme.of(context).visualDensity

  • 不同屏幕的一般大小 FormFactor

  • 屏幕类型 ScreenType

  • 获取设备类型 KIsWeb Platform

    bool get isMobileDevice => !kIsWeb && (Platform.isIOS || Platform.isAndroid);
bool get isDesktopDevice =>
!kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux);
bool get isMobileDeviceOrWeb => kIsWeb || isMobileDevice;
bool get isDesktopDeviceOrWeb => kIsWeb || isDesktopDevice;

  • 监听滚动行为 Listener

  • 不同手势下变化状态 FocusableActionDetector

  • 小部件手势的顺序 FocusTraversalGroup

  • 监听键盘输入 Focus

    • RawKeyDownEvent

  • 全局键盘监听

    • RawKeyboard

  • 鼠标相关

    • MouseRegion

  • 带滚动条的部件

    • Scrollbar

  • 可以被选择的文本

    • SelectableText

  • 富文本

    • TextSpan

  • 悬停提示 Tooltip

  • 弹出提示，上下文菜单

    • context_menus
    • anchored_popups
    • flutter_portal
    • uper_tooltip
    • custom_pop_up_menu

  • 拖动

    • Draggable DragTarget

  • 父布局是屏幕时，该部件的宽高强制与屏幕相同

  • 父布局是屏幕时，使用 UnconstrainedBox 可获得任意大小

  • 如果部件的宽高大于父布局了，使用 OverflowBox 可消除警告

  • 限制大小的容器 LimitedBox

  • 包裹内容 FittedBox

    • 只能缩放有界的小部件

  • 有别于Expanded Flexible

  • 约束其与父布局的大小相同 SizedBox.expand

  • 透明度小部件 Opacity

  • 占位小部件 Spacer

  • 好看风格的标题栏 Sliver （配合CustomScrollView）

    • SliverAppBar
    • SliverGrid 可动态变化列数
    • SliverList

  • 动态决定部件的显示与否 Visibility

  • 以下划线开头的成员或类_是私有的

  • 回调出状态 ValueChanged

  • 加载assets下的资产

    • AssetBundle
    • rootBundle
    • DefaultAssetBundle

  • 加载图像 AssetImage

  • 在Android中加载Flutter资源

    PluginRegistry.Registrar;
AssetManager assetManager = registrar.context().getAssets();
String key = registrar.lookupKeyForAsset("icons/heart.png");
AssetFileDescriptor fd = assetManager.openFd(key);

  • 路由

    • Navigator
    • Router

  • 动画

    • Text
      • AnimatedDefaultTextStyle
    • CustomPainter
    • TweenAnimationBuilder
    • ImplicitlyAnimatedWidget
    • AnimatedBuilder
    • 动画库
      • Flare
      • Lottie

  • 动画六步走

    • 有状态的小部件 with SingleTickerProviderStateMixin
    • 生成 AnimationController controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
    • 生成 Animation animation = Tween(begin: 0, end: 300).animate(controller)..addStatusListener()..addListener();
    • controller.forward();
    • 记得将animation添加到具体的小部件上面
    • controller.dispose(); 记得一定要放在super.dispost()之后

  • 动画小部件 AnimatedWidget(父类，可进行自定义)

    • AnimatedBuilder
    • AnimatedModalBarrier
    • DecoratedBoxTransition
    • FadeTransition
    • PositionedTransition
    • RelativePositionedTransition
    • RotationTransition
    • ScaleTransition
    • SizeTransition
    • SlideTransition

  • AnimatedBuilder

    • BottomSheet
    • ExpansionTile
    • PopupMenu
    • ProgressIndicator
    • RefreshIndicator
    • Scaffold
    • SnackBar
    • TabBar
    • TextField

  • 动画小容器 AnimatedContainer

  • 可以在右上角显示标签的部件 Badge

  • 横向的圆柱形导航条 SegmentedButton

  • 可以在多条目中拖动的listview ReorderableListView

  • 带建议和筛选条件还有历史记录的搜索条 SearchAnchor

  • 想要让屏幕内容可以复制的 SelectionArea

  • 联网 http 软件包

  • Json序列化库

    • json_serializable
      • flutter pub run build_runner build --delete-conflicting-outputs
      • flutter pub run build_runner watch --delete-conflicting-outputs

  • flutter和其他原生平台互调方法

  • flutter还可以调用C代码

  • flutter添加库的命令

    • flutter pub add 库名(比如http)

  • @pragma('vm:entry-point')注解的作用：如何方法没有被明显的调用，那么该方法可能会被dart编译器优化掉，使用此注解可保留

  • 监听页面的build构建完毕方法，很重要，当页面没有build完毕时调用setState是不行的

      SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
        
      });
      //等价
      WidgetsBinding.instance.addPostFrameCallback((Duration duration) {

      });
  • scheduleMicrotask
  最高优先级：在当前事件处理完成后立即执行
  同步之后：在所有同步代码执行完成后执行
  Future 之前：在事件队列中的 Future 之前执行
  不阻塞 UI：适合处理需要立即执行但不阻塞 UI 的任务

  scheduleMicrotask(() {

  });
posted @ 2022-10-18 11:00  呢哇哦比较  阅读(133)  评论(0)    收藏  举报