11.首页_屏幕适配方案讲解
国人写的屏幕适配插件：
https://github.com/OpenFlutter/flutter_screenutil
最新版本是0.5.1
在pubspec.yaml文件内配置包：
引入这个包：
import 'package:flutter_screenutil/flutter_screenutil.dart';
初始化我们的设计尺寸：这里为什么尺寸是750*1334呢，因为技术胖的老板当时用的是iphone6 为了老板审图方便，就用的这个尺寸。所以我们这里也用这个尺寸。实际的工作中是根据图片的大小来设置的
修改高度
修改后
效果展示：
设备的像素密度、设备的高度、设备的宽度，再学三个
输出的内容：
最终代码：
import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart'; class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
String homePageContent='正在获取数据';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('百姓生活+')),
body: FutureBuilder(
future: getHomePageContent(),
builder: (context, snapshot) {
if(snapshot.hasData){
var data=json.decode(snapshot.data.toString());
List<Map> swiper=(data['data']['slides'] as List).cast();
return Column(
children: <Widget>[
SwiperDiy(swiperDateList: swiper)
],
);
}else{
return Center(child: Text('加载中....'));
}
},
),
);
}
}
//首页轮播插件
class SwiperDiy extends StatelessWidget {
final List swiperDateList;
//构造函数
SwiperDiy({this.swiperDateList}); @override
Widget build(BuildContext context) { ScreenUtil.instance = ScreenUtil(width: ,height: )..init(context); print('设备的像素密度：${ScreenUtil.pixelRatio}');
print('设备的高：${ScreenUtil.screenWidth}');
print('设备的宽：${ScreenUtil.screenHeight}'); return Container(
height: ScreenUtil().setHeight(),//
width:ScreenUtil().setWidth(),
child: Swiper(
itemBuilder: (BuildContext context,int index){
return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,);
},
itemCount: swiperDateList.length,
pagination: SwiperPagination(),
autoplay: true,
),
);
}
}
home_page.dart