Flutter实战视频-移动电商-11.首页_屏幕适配方案讲解

最新推荐文章于 2025-05-23 01:35:18 发布

转载最新推荐文章于 2025-05-23 01:35:18 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjunwei/p/10651921.html

文章标签：

#移动开发 #json

本文介绍了一款由国人开发的Flutter屏幕适配插件——flutter_screenutil，详细讲解了如何在项目中配置并使用该插件进行屏幕适配，包括初始化设计尺寸、调整组件高度等操作，并展示了实际应用效果。

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: 750,height: 1334)..init(context);

    print('设备的像素密度：${ScreenUtil.pixelRatio}');
    print('设备的高：${ScreenUtil.screenWidth}');
    print('设备的宽：${ScreenUtil.screenHeight}');

    return Container(
      height: ScreenUtil().setHeight(333),//
      width:ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,);
        },
        itemCount: swiperDateList.length,
        pagination: SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}