学习flutter 3.用flutter构建应用

flutter自带了优秀的ui库 足够日常开发 以下几点仍然是构建应用必不可少的

布局和样式

相比web flutter没有dom&css 而是用一系列嵌套的widget完成布局和样式的构建
相关的常规widget如下

• Container 基础容器 可设置常规样式、宽高外边距(margin)等
• Text 文本 支持字体大小、颜色、加粗、行高等样式
• Image 图片
• Row&Column flex布局
• Center 居中
• Align 父子组件边缘对齐
• Padding 提供内边距
• Stack 可重叠的区域.子组件应当被Positioned包裹以正确定位.类似于绝对定位.
• SingleChildScrollView 滚动
• ThemeData 全局主题

状态管理工具

官方推荐Provider管理状态

// 创建全局状态类型
class Counter with ChangeNotifier {
  int count = 0;

  void increment() {
    count++;
    notifyListeners();
  }
}

// 创建为下方widget提供上下文
import 'package:provider/provider.dart';

ChangeNotifierProvider(
  create: (_) => Counter(),
  child: const A(a: 'Flutter Demo Home Page')),
)


class A extends StatelessWidget {
  const A({super.key, required this.a});
  final String a;

  @override
  Widget build(context) {
    var counter = context.watch<Counter>();
    return Column(children: [
      Text('a: $a'),
      Text('${counter.count}'),
      OutlinedButton(onPressed: counter.increment, child: const Text('+1'))
    ]);
  }
}

写成这样也是可以的

    var count = context.select<Counter, int>((state) => state.count);
    var increment =
        context.select<Counter, void Function()>((state) => state.increment);

优点是不需要的属性变化后不会引发当前组件重新渲染

如果有多个相同类型的provider 只会取到离当前组件最近的那个(再次提醒 dart的类型是强类型 具有运行时意义 而不是简单的编译时约束)

Provider可以作为全局/局部的状态管理工具

dart生态

• dart:async 包含Completer.包含Timer以创建定时任务.
• dart:math 数学库
• dart:convert 数据转化.例如json-Map的转化。