跳至主要內容

03.基础内容

12a2024/10/3大约 4 分钟flutter跨平台前端

03.基础内容

3.1 状态管理

  • 一般有三种状态管理方式
    • 组件管理自身的状态,此时组件需要继承statefulWidget
    • 由父组件管理子组件的状态,并告诉子组件如何更新,子组件不管理状态,只需要继承statelessWidget,接收来自父组件的参数和来自父组件的回调函数
      • 这种方法类似于vue中,组件在页面中的使用方式,这样页面中的其他组件也能够取得此组件的状态
    • 一般组件的状态可以通过混合管理完成,将可能需要被其他组件使用的状态交给父组件管理,自身管理显示效果等的参数,当然如果希望组件能够重载不同的显示效果,也可以定义自定义参数供父组件定义
    • 使用全局状态管理,将状态交给全局能够调用的接口,实现不同页面需要的同一状态管理,一般使用全局事件总线的方法,或者使用Provider等有全局状态管理的包完成,

3.2 路由管理

  • 使用Navigator类实现路由跳转
    • Navigator.push(BuildContext context, Route route):将给定的路由入栈,返回值是一个Future对象，用以接收新路由出栈时的返回数据
      • MaterialPageRoute是Route的一个实现,对于Navigator.push方法而言,route一般可以使用此类MaterialPageRoute(builder: (context) => const OtherRoute())
    • Navigator.pop(BuildContext context, [ result ]):将栈顶路由出栈,result为页面关闭时返回给上一个页面的数据
    • pushNamed(BuildContext context, String routeName,{Object arguments}):通过MaterialApp中定义的routes,使用路由名称访问路由,每个命名路由有名称和回调函数对应"new_page":(context) => NewRoute()

    Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route),其他命名路由相关的方法也是一样的

  • 路由传输的参数需要使用ModalRoute.of(context).settings.arguments接收
  • 路由钩子onGenerateRoute:允许在进入新命名路由之时通过此函数进行判断,是否需要重定向

3.3 包与资源管理

  • pubspec.yaml文件解析

    • name:应用或包名称
    • description:应用或包的描述,简介
    • version:应用或包的版本号
    • dependencies:应用或包依赖的其他包或插件
    • dev_dependencies:开发环境依赖的工具包
    • flutter:flutter相关的配置选项
    • assets:指定应包含在应用程序中的文件

  • 添加包

    • 使用flutter pub get XXX获取包
    • 手动在pubspec.yaml文件中添加dependency,格式为包名称:版本号(带^表示此包接受向上兼容的新版本,允许flutter在未来自动更新到新版本)
    • 其他方式引入包
    dependencies:
  #引入本地包,支持相对和绝对路径
  pkg1:
      path: ../../code/pkg1
  #引入git中的包
  pkg2:
    git:
      url: git://github.com/xxx/pkg2.git
      #支持指定仓库中的子目录
      path: packages/package1

  • 添加资源

flutter:
  assets:
    # 路径一般根据yaml文件得到的相对路径,如果是lib/可以省略
    - assets/my_icon.png
    # 支持资源变体,下面的就是会同时引入的background.png文件
    # assets/dark/background.png
    # assets/2.0x/background.png
    # assets/3.0x/background.png
    - assets/background.png
    # 如果要包含一个目录下的所有assets,需要在目录名称结尾加上/
    - directory/
    - directory/subdirectory/

  fonts:
    # family是字体的名称
    - family: Raleway
      fonts:
        #asset是相对于pubspec.yaml文件的路径
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          #指定字体是倾斜还是正常,对应的值为italic和normal
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          #指定字体的粗细,取值范围是100到900之间的整百数
          weight: 700
  • 使用非文本资源
// 图片资源:
// 如果是本地的图片,这里的路径就是项目的yaml文件写明的路径
Image(image:const AssetImage('yaml中写明的路径', package: '包名'))
Image.asset('assets/甜甜圈.png')
// 如果是来自包中的资源,需要提供包名
Image(image:const AssetImage('在包中对应的路径', package: '包名'))
Image.asset('assets/甜甜圈.png',package: '包名')

// 字体资源
// 全局使用
MaterialApp(
     title: 'Test APP',
     theme: ThemeData(
     fontFamily: 'Raleway',
     // 包中字体
     // fontFamily: 'packages/包名/字体名',
   )
)

// 局部使用
TextStyle textStyle = TextStyle(fontFamily: 'Raleway',);
// 如果是包中的字体需要添加包名
TextStyle textStyle = TextStyle(fontFamily: 'Raleway',package：'包名');
Text('', style: textStyle.copyWith(
        fontSize: 18.0,
        color: Colors.red,
        fontWeight: FontWeight.bold,
        ),
    );

Android和ios也可以使用对应的方法得到非其文件夹内资源,具体查看平台共享assets

  • 更换Android和ios的应用图标
  • Android的图标在/android/app/src/main/res,按照Android的方法替换
  • ios的图标在/ios/Runner/Assets.xcassets/AppIcon.appiconset,按照ios方法替换

3.4 前后端json交互

  • 由于dart作为一种可声明变量类型的语言,对于从后端传入的json,自然是希望能够获得对应的提示和补全支持
  • 目前flutter只支持将JsonString转化为Map,然后再由开发者手写代码将key值一一对应到相应的字段上,可以试试json_model辅助生成这些代码
最近更新