FlutterUI标准库

CustomMultiChildLayout

CustomMultiChildLayout从字面意思就说的很清楚了，自定义多个孩子的布局控件

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

CustomMultiChildLayout(
  delegate: XXXDelegate(dataList), //委托 用于设置child的大小和位置
  children: dataList.map((e) => LayoutId(id: e['id'], child: const _FigureBlock())).toList(), //视图 对应每个child显示的样子
)

class _FigureBlock extends StatelessWidget {

}


class XXXDelegate extends MultiChildLayoutDelegate {

  XXXDelegate(this.dataList);
  List dataList;
  /// 处理大小和位置
  @override
  void performLayout(Size size) {
    for (var element in dataList) {
      String id = element['id'];
      Rect rect = element['rect'];

      // 约束对应id的child的消息
      layoutChild(id, BoxConstraints(maxHeight: rect.height, maxWidth: size.width));
      // 对应id的child的位置
      positionChild(id, Offset(rect.left, rect.top));
    }
  }

  /// 是否需要重新布局
  @override
  bool shouldRelayout(_BlockEventMultiChildLayoutDelegate oldDelegate) {
    return oldDelegate.dataList != dataList;
  }

}


Flutter未分类

沉浸式处理

基本使用(全局生效)

Flutter侧设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 黑色沉浸式状态栏颜色 黑色文字
SystemUiOverlayStyle dark = const SystemUiOverlayStyle(
    // systemNavigationBarColor: Color(0xFF000000),
    systemNavigationBarDividerColor: null, //设置导航栏和内容区域的分割线颜色
    systemNavigationBarIconBrightness：null, //设置导航栏图标的颜色，可选值为Brightness.light或Brightness.dark。
    /// 注意安卓要想实现沉浸式的状态栏 需要底部设置透明色
    statusBarColor: Colors.transparent, // 状态栏颜色为透明
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark, // 设置状态栏图标的颜色，可选值为Brightness.light或Brightness.dark。
    statusBarBrightness: Brightness.light,  // 设置状态栏文字的颜色，可选值为Brightness.light或Brightness.dark。
);

SystemChrome.setSystemUIOverlayStyle(dark);

原生侧设置

1
2
3
4
5
6
7
8
9
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setStatusBarColor(0);//原生侧设置透明
    }
}

Read More
Flutter未分类

资源使用

Flutter 应用程序包含代码和 assets（也为资源）。资源是被打包到应用程序安装包中，可以在运行时访问的一种文件。常见的资源类型包括静态数据（例如 JSON 文件），配置文件，图标和图片（JPEG，WebP，GIF，动画 WebP / GIF，PNG，BMP 和 WBMP）。

指定资源

Flutter使用pubspec.yaml文件来配置所需要的资源

1
2
3
4
5
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
    - directory/

如果要包含一个目录下所有的assets，需要在目录名称的结尾加上/

Read More