第九十九期：flutter学习（二）

terrence386

发布于 2022-07-15 11:30:14

4390

发布于 2022-07-15 11:30:14

文章被收录于专栏：JavaScript高级程序设计JavaScript高级程序设计

今天继续学习flutter相关的一些知识点，主要包括以下几点内容。

状态组件
发送请求 dio
屏幕尺寸适配

状态组件

flutter 的状态组件概念和 react的基本一致，组件内部维护了自身的状态，并且同样通过调用setState进行状态修改。

我们使用vs code可以使用快捷命令生成状态组件，然后修改成我们需要的组件名称即可。

有示例代码如下：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var userInfo = '';
  // initState
  @override
  void initState(){
    getUserInfo().then((value) {
      print('user-info=====>$value');
       setState(() {
        userInfo:value;
      });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('T-shop'),
      ),
      body: Container(
        child: Center(
          child: Text('terrence'),
        ),
      )
    );
  }
}

HomePage 状态组件中，定义了userInfo变量，当我们使用getUserInfo方法获取用户信息后，则通过setState方法对其进行赋值，从而达到修改状态的目的。

发送请求

和web端开发相同，flutter项目的开发也需要用到相应的请求库，目前使用的较多的是dio库。

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

它的用法也非常简单，基本上和我们写web端的开发一致。

简单的用法如下：

import 'package:dio/dio.dart';
void getHttp() async {
  try {
    var response = await Dio().get('http://www.google.com');
    print(response);
  } catch (e) {
    print(e);
  }
}

引入相应的包，定义函数，然后发送相应的请求即可。

比如我们可以定义一个获取用户信息的方法getUserInfo：

// service_methods.dart
// 获取用户信息
Future getUserInfo() async {
  try{
     print('get-userInfo--->');
  Response response;
  Dio dio = new Dio();
  dio.options.contentType = Headers.jsonContentType;
  response = await dio.post( servicePath['homePageContent']??'', data:{} );

  if(response.statusCode == 200){
    return response.data;
  }else{
    throw Exception('service error');
  }
  }catch(e){
    return print(e);
  }
 
}

我们使用时，和promise的用法基本一致。先引入相应的文件包，然后调用方法，在then方法中接收返回值进行处理。

// 引入相应的文件包
import '../service/service_methods.dart';

// 调用方法进行处理
@override
  void initState(){
    getUserInfo().then((value) {
      print('user-info=====>$value');
      setState(() {
        userInfo:value;
      });
    });
    super.initState();
  }

又一点需要注意的是，接口返回的数据又可能是一个json字符串，同时dart和js语言类似，但是并不一样，它无法使用.点操作符直接获取对象的属性，我们需要做一些数据格式的转换，或者直接使用dart语言的Map数据结构的操作方法进行取值。

屏幕尺寸适配

屏幕尺寸配置需要用到相关的依赖包：flutter_screenutil。

我们可以在github上找到这个包，它本质上也是一个组件，用法也比较简单。

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    //设置尺寸（填写设计中设备的屏幕尺寸）如果设计基于360dp * 690dp的屏幕
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: Size(360, 690),
        context: context,
        minTextAdapt: true,
        orientation: Orientation.portrait);
    return Scaffold();
  }
}

它有一些常用的属性，可以了解一下：

属性	类型	默认值	描述
designSize	Size	Size(360, 690)	设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)
deviceSize	Size	null	物理设备的大小
builder	Widget Function()	Container()	一般返回一个MaterialApp类型的Function()
orientation	Orientation	portrait	屏幕方向
splitScreenMode	bool	false	支持分屏尺寸
minTextAdapt	bool	false	是否根据宽度/高度中的最小值适配文字
context	BuildContext	null	传入context会更灵敏的根据屏幕变化而改变
child	Widget	null	builder的一部分，其依赖项属性不使用该库
rebuildFactor	Function	default	返回屏幕指标更改时是否重建。