文档章节

03Flutter仿京东商城项目 封装适配库以及实现左右滑动ListView

o
 osc_wws45aot
发布于 2019/08/22 07:03
字数 310
阅读 6
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

ScreenAdaper.dart

import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenAdaper {
  //
  static init(context) {
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  }

  static height(double value) {
    return ScreenUtil.getInstance().setHeight(value);
  }

  static width(double value) {
    return ScreenUtil.getInstance().setWidth(value);
  }

  static getScreenHeight() {
    return ScreenUtil.screenHeightDp;
  }

  static getScreenWidth() {
    return ScreenUtil.screenWidthDp;
  }
}
/*  */

 Home.dart

 

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import '../../services/ScreenAdaper.dart';

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

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //轮播图:
  //flutter run -d all 链接多个设备的命令:
  Widget _swiperWidget() {
    List<Map> imgList = [
      {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
      {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
      {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
    ];

    return Container(
      child: AspectRatio(
        aspectRatio: 2 / 1,
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              imgList[index]['url'],
              fit: BoxFit.fill,
            );
          },
          itemCount: imgList.length,
          pagination: new SwiperPagination(),
          control: new SwiperControl(),
          autoplay: true,
        ),
      ),
    );
  }

  //标题:
  Widget _titleWidget(value) {
    return Container(
      height: ScreenAdaper.height(46),
      margin: EdgeInsets.only(left: ScreenAdaper.width(20)),
      padding: EdgeInsets.only(left: ScreenAdaper.width(20)),
      decoration: BoxDecoration(
          border: Border(
              left: BorderSide(
                  color: Colors.red, width: ScreenAdaper.width(10)))),
      child: Text(value, style: TextStyle(color: Colors.black54)),
    );
  }

  //热门商品:
  Widget _hotProductListWidget() {
    return Container(
      height: ScreenAdaper.height(240),
      padding: EdgeInsets.all(ScreenAdaper.width(10)),
      // width: double.infinity, //寬度自適應
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (contxt, index) {
          return Column(
            children: <Widget>[
              Container(
                height: ScreenAdaper.height(140),
                width: ScreenAdaper.width(140),
                margin: EdgeInsets.only(right:ScreenAdaper.width(21)),

                child: Image.network('https://www.itying.com/images/flutter/hot${index+1}.jpg',fit:BoxFit.cover),
              ),
              Container(
                padding: EdgeInsets.only(top: ScreenAdaper.height(10)),
                height: ScreenAdaper.height(44),
                child: Text('第${index}条'),
              )
            ],
          );
        },
        itemCount: 9,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    ScreenAdaper.init(context);
    return ListView(
      children: <Widget>[
        _swiperWidget(),
        SizedBox(height: ScreenAdaper.height(20)),
        _titleWidget("猜你喜欢"),

        _hotProductListWidget(),
        SizedBox(height: ScreenAdaper.height(20)),
        _titleWidget("热门推荐"),
        
      ],
    );
  }
}

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
8
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.2K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1

没有更多内容

加载失败,请刷新页面

加载更多

SwaggerUI看烦了,IGeekFan.AspNetCore.Knife4jUI 帮你换个新皮肤

背景 好像是上周四,看到微信群有人说java有轮子swagger-bootstrap-ui,而c#,就是找不到。 于是我一看,就说大话:“这个只是一套UI,他这个有开源地址么” 被@at说:你试试... 当天晚上就把...

张善友
今天
0
0
字符串驻留是个什么鬼!

先看下面这段代码 >>> a = 'apple' >>> b = 'apple' >>> a is b True 返回结果看起来没毛病 再来看这段: >>> a = 'apple!' >>> b = 'apple!' >>> a is b False 这个结果是不是有点诡异 前后......

谭庆波
昨天
0
0
golang包的日常(2)——log包

普通使用 log包定义了Logger类型,该类型提供了一些格式化输出的方法。 log包中预定义了一个标准logger对象std,使我们可以直接调用函数来打印日志,默认是标准错误输出(Stderr),打印到终...

osc_dg21zk4i
19分钟前
0
0
近10年全国高校双青人才排名TOP50,苏州大学表现抢眼

转眼又到了每年的杰青和优青项目评选的日子,作为高校人才水平的重要评判标准,每年高校的自然科学基金项目数都是一个非常重要的指标。当然,由于杰青每年只有200个名额,而国内有3000多所高...

科研菌
昨天
0
0
意派Epub360丨从制作到推广,H5页面如何刷屏?

不是所有H5最终都可以引爆朋友圈,也不是所有未能刷屏的H5都不够优秀。如何找到爆点、如何制作实现、如何传播转化……每一个要点都可能是影响刷屏的关键。即使是再资深的营销专家,也很难在H...

牙牙乐牙牙乐
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部