首页技术博客 PHP教程数据库技术前端开发 HTML5 Nginx php论坛

新用户注册 | 会员登录

热门标签 | HotTags

当前位置: 开发笔记 > 编程语言 > 正文

Flutter实战视频移动电商19.首页_火爆专区界面布局编写

作者：丁丽君coolboy | 来源：互联网 | 2023-09-09 16:49

看一下图片的效果一个标题栏，下面是多行两列。里面可以用column布局，外面用Warp流式布局有得小伙伴说这里可以用网格布局，网格布局的话还是有一定的效率问题。这里就用我们的流布局

看一下图片的效果

一个标题栏，下面是多行两列。里面可以用column布局，外面用Warp流式布局

有得小伙伴说这里可以用网格布局，网格布局的话还是有一定的效率问题。这里就用我们的流布局，还是很顺畅的

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

填一下上节课的坑，设置可选参数

service_method.dart 这里用花括号括起来就是个可选的参数了。

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

修改成可选参数后呢，我们在调用方法的时候就报错了。

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

我们只要修改为key/value的形式就可以了

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

火爆专区的请求数据

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

上拉刷新有几种方式

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

火爆专区主要的代码，这是之前的，现在要删掉了

//火爆专区 定义为动态的类
class HotGoods extends StatefulWidget {
  @override
  _HotGoodsState createState() => _HotGoodsState();
}

class _HotGoodsState extends State {
  void initState() { 
    super.initState();
    request('homePageBelowConten',formData:1).then((val){
      print(val);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Text('111111')
    );
  }
}

我们在最上面定义两个变量。使用的是State For Widget的形式

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

定义一个内部的方法去获取远程数据，内部方法用下划线开头 _getHotGoods()

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

创建火爆专区的标题

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

//火爆专区的标题
  Widget hotTitle = Container(
    margin: EdgeInsets.only(top:10.0),//上边距
    alignment: Alignment.center,//居中对齐
    color: Colors.transparent,
    child: Text('火爆专区'),
  );

流式布局

流式布局的问题，如果数据是空那么返回流式布局就会报错

所以我们需要判断数据的list的长度

把list包装成Widget

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

把商品的List的形式，转换成了 List的形式

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

最终再返回我们的wrap布局

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

else的情况，当列表数据为空那么我们就返回一个空的Text widget

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

把标题和流式布局组合起来

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

调用加载数据的方法

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

测试效果展示

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

往下拖还有一些数据

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

标题加上内边距

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

边距稍微好看了点

Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

最终代码

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';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State with AutomaticKeepAliveClientMixin{

  int page=1;
  List hotGoodsList=[];
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() { 
    super.initState();
    _getHotGoods();
    print('1111111');
  }

  String homePageContent='正在获取数据';
  @override
  Widget build(BuildContext context) {
     var formData={'lon':'115.02932','lat':'35.76189'};//传一个经纬度过去，防止恶意下单
    return Scaffold(
      appBar: AppBar(title: Text('百姓生活+')),
      body: FutureBuilder(
        future: request('homePageContent',formData:formData),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            var data=json.decode(snapshot.data.toString());
            List swiper=(data['data']['slides'] as List).cast();
            List navigatorList=(data['data']['category'] as List).cast();
            String adPicture=data['data']['advertesPicture']['PICTURE_ADDRESS'];
            String leaderImage=data['data']['shopInfo']['leaderImage'];
            String leaderPhone=data['data']['shopInfo']['leaderPhone'];
            List recommendList=(data['data']['recommend'] as List).cast();
            String floor1Title=data['data']['floor1Pic']['PICTURE_ADDRESS'];
            String floor2Title=data['data']['floor2Pic']['PICTURE_ADDRESS'];
            String floor3Title=data['data']['floor3Pic']['PICTURE_ADDRESS'];
            List floor1=(data['data']['floor1'] as List).cast();
            List floor2=(data['data']['floor2'] as List).cast();
            List floor3=(data['data']['floor3'] as List).cast();

            return SingleChildScrollView(
              child: Column(
                children: [
                  SwiperDiy(swiperDateList: swiper),
                  TopNavigator(navigatorList:navigatorList ,),
                  AdBanner(adPicture:adPicture),
                  LeaderPhone(leaderImage: leaderImage,leaderPhone: leaderPhone,),
                  Recommend(recommendList:recommendList),
                  FloorTitle(picture_address: floor1Title,),//楼层1的标题图片
                  FloorContent(floorGoodsList: floor1),
                   FloorTitle(picture_address: floor2Title,),//楼层1的标题图片
                  FloorContent(floorGoodsList: floor2),
                   FloorTitle(picture_address: floor3Title,),//楼层1的标题图片
                  FloorContent(floorGoodsList: floor3),
                  _hotGoods()
                ],
              ),
            );
          }else{
            return Center(child: Text('加载中....'));
          }
        },
      ),
    );
  }

  void _getHotGoods(){
    var formData={'page',page};
    request('homePageBelowConten',formData:formData).then((val){
      var data=json.decode(val.toString());
      List newGoodsList=(data['data'] as List).cast();
      //把新的列表加到老的列表里面
      setState(() {
        hotGoodsList.addAll(newGoodsList);
        page++;
      });
    });
  }
  //火爆专区的标题
  Widget hotTitle = Container(
    margin: EdgeInsets.only(top:10.0),//上边距
    alignment: Alignment.center,//居中对齐
    color: Colors.transparent,
    padding: EdgeInsets.all(5.0),
    child: Text('火爆专区'),
  );

  Widget _wrapList(){
    if(hotGoodsList.length!=0){
      List listWidget=hotGoodsList.map((val){
        return InkWell(
          onTap: (){},
          child: Container(
            width: ScreenUtil().setWidth(372),
            color: Colors.white,
            padding: EdgeInsets.all(5.0),//内边距
            margin: EdgeInsets.only(bottom: 3.0),
            child: Column(
              children: [
                Image.network(val['image'],width: ScreenUtil().setWidth(370),),//设置宽度防止超出边界
                Text(
                  val['name'],
                  maxLines: 1,//只有一行
                  overflow: TextOverflow.ellipsis,//超出显示省略号的形式
                  style: TextStyle(color: Colors.pink,fontSize: ScreenUtil().setSp(26)),
                ),
                Row(
                  children: [
                    Text('￥${val['mallPrice']}'),//商城价格
                    Text(
                      '￥${val['price']}',
                      style: TextStyle(color: Colors.black26,decoration: TextDecoration.lineThrough),//加上删除线的价格
                    )
                  ],
                )
              ],
            ),
          ),
        );
      }).toList();
      return Wrap(
        spacing:2 ,//每一行显示两列
        children: listWidget,
      );
    }else{
      return Text('');
    }
  }

  //组合火爆专区的标题和列表
  Widget _hotGoods(){
    return Container(
      child: Column(
        children: [
          hotTitle,
          _wrapList()
        ],
      ),
    );
  }


}
//首页轮播插件
class SwiperDiy extends StatelessWidget {
  final List swiperDateList;
  //构造函数
  SwiperDiy({this.swiperDateList});

  @override
  Widget build(BuildContext 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,
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {
  final List navigatorList;

  TopNavigator({Key key, this.navigatorList}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context,item){
    return InkWell(
      onTap: (){print('点击了导航');},
      child: Column(
        children: [
          Image.network(item['image'],width: ScreenUtil().setWidth(95)),
          Text(item['mallCategoryName'])
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    if(this.navigatorList.length>10){
      this.navigatorList.removeRange(10,this.navigatorList.length);//从第十个截取，后面都截取掉
    }
    return Container(
      height: ScreenUtil().setHeight(320),//只是自己大概预估的一个高度，后续可以再调整
      padding: EdgeInsets.all(3.0),//为了不让它切着屏幕的边缘，我们给它一个padding
      child: GridView.count(
        crossAxisCount: 5,//每行显示5个元素
        padding: EdgeInsets.all(5.0),//每一项都设置一个padding，这样他就不挨着了。
        children: navigatorList.map((item){
          return _gridViewItemUI(context,item);
        }).toList(),
      ),
    );
  }
}

class AdBanner extends StatelessWidget {
  final String adPicture;

  AdBanner({Key key, this.adPicture}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(adPicture),
    );
  }
}

//店长电话模块
class LeaderPhone extends StatelessWidget {
  final String leaderImage;//店长图片
  final String leaderPhone;//店长电话 


  LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: _launchURL,
        child: Image.network(leaderImage),
      ),
    );
  }

  void _launchURL() async {
    String url = 'tel:'+leaderPhone;
    //String url = 'http://jspang.com';
    if(await canLaunch(url)){
      await launch(url);
    }else{
      throw 'url不能进行访问，异常';
    }
  }
}

//商品推荐
class Recommend extends StatelessWidget {
  final List recommendList;

  Recommend({Key key, this.recommendList}) : super(key: key);

  //商品标题
  Widget _titleWidget(){
    return Container(
      alignment: Alignment.centerLeft,//局长靠左对齐
      padding: EdgeInsets.fromLTRB(10.0, 2.0, 0, 5.0),//左上右下
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 0.5,color: Colors.black12) //设置底部的bottom的边框，Black12是浅灰色
        ),
      ),
      child: Text(
        '商品推荐',
        style:TextStyle(color: Colors.pink)
      ),
    );
  }
  //商品单独项方法
  Widget _item(index){
    return InkWell(
      onTap: (){},//点击事件先留空
      child: Container(
        height: ScreenUtil().setHeight(380),//兼容性的高度 用了ScreenUtil
        width: ScreenUtil().setWidth(250),//750除以3所以是250
        padding: EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            left: BorderSide(width: 1,color: Colors.black12)//右侧的 边线的样式 宽度和 颜色
          )
        ),
        child: Column(
          children: [
            Image.network(recommendList[index]['image']),
            Text('￥${recommendList[index]['mallPrice']}'),
            Text(
              '￥${recommendList[index]['price']}',
              style: TextStyle(
                decoration: TextDecoration.lineThrough,//删除线的样式
                color: Colors.grey//浅灰色
              ),
            ),
          ],
        ),
      ),
    );
  }
  //横向列表方法
  Widget _recommendList(){
    return Container(
      height: ScreenUtil().setHeight(380),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,//横向的
        itemCount: recommendList.length,
        itemBuilder: (context,index){
          return _item(index);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(430),//列表已经设置为330了因为还有上面标题，所以要比330高，这里先设置为380
      margin: EdgeInsets.only(top: 10.0),
      child: Column(
       children: [
          _titleWidget(),
          _recommendList()
       ],
      ),
    );
  }
}

//楼层标题
class FloorTitle extends StatelessWidget {
  final String picture_address;

  FloorTitle({Key key, this.picture_address}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Image.network(picture_address),
    );
  }
}

//楼层商品列表
class FloorContent extends StatelessWidget {
  final List floorGoodsList;

  FloorContent({Key key, this.floorGoodsList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          _firstRow(),
          _otherGoods()
        ],
      ),
    );
  }

 Widget _firstRow(){
   return Row(
     children: [
       _goodsItem(floorGoodsList[0]),
       Column(
         children: [
          _goodsItem(floorGoodsList[1]),
           _goodsItem(floorGoodsList[2])
         ],
       )
     ],
   );
 }
 Widget _otherGoods(){
   return Row(
     children: [
        _goodsItem(floorGoodsList[3]),
        _goodsItem(floorGoodsList[4])
     ],
   );
 }
  Widget _goodsItem(Map goods){
    return Container(
      width: ScreenUtil().setWidth(375),
      child: InkWell(
        onTap: (){print('点击了楼层商品');},
        child: Image.network(goods['image']),
      ),
    );
  }
}

home_page.dart

推荐阅读

bit
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
text
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
text
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
text
如何查询zone下的表的信息

本文介绍了如何通过TcaplusDB知识库查询zone下的表的信息。包括请求地址、GET请求参数说明、返回参数说明等内容。通过curl方法发起请求，并提供了请求示例。 ... [详细]

蜡笔小新 2023-12-12 08:26:32
go
（三）多表代码生成的实现方法

本文介绍了一种实现多表代码生成的方法，使用了java代码和org.jeecg框架中的相关类和接口。通过设置主表配置，可以生成父子表的数据模型。 ... [详细]

蜡笔小新 2023-12-11 19:46:13
select
Android系统源码分析Zygote和SystemServer启动过程详解

本文详细解析了Android系统源码中Zygote和SystemServer的启动过程。首先介绍了系统framework层启动的内容，帮助理解四大组件的启动和管理过程。接着介绍了AMS、PMS等系统服务的作用和调用方式。然后详细分析了Zygote的启动过程，解释了Zygote在Android启动过程中的决定作用。最后通过时序图展示了整个过程。 ... [详细]

蜡笔小新 2023-12-11 17:46:46
text
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
hash
Redis数据结构之string应用场景解析

本文介绍了Redis的基础数据结构string的应用场景，并以面试的形式进行问答讲解，帮助读者更好地理解和应用Redis。同时，描述了一位面试者的心理状态和面试官的行为。 ... [详细]

蜡笔小新 2023-12-14 14:02:42
hash
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
hash
计算机网络初识及通信流程分析

本文介绍了计算机网络的定义和通信流程，包括客户端编译文件、二进制转换、三层路由设备等。同时，还介绍了计算机网络中常用的关键词，如MAC地址和IP地址。 ... [详细]

蜡笔小新 2023-12-13 16:50:29
export
Linux如何安装Mongodb的详细步骤和注意事项

本文介绍了Linux如何安装Mongodb的详细步骤和注意事项，同时介绍了Mongodb的特点和优势。Mongodb是一个开源的数据库，适用于各种规模的企业和各类应用程序。它具有灵活的数据模式和高性能的数据读写操作，能够提高企业的敏捷性和可扩展性。文章还提供了Mongodb的下载安装包地址。 ... [详细]

蜡笔小新 2023-12-12 21:54:15
text
Go GUIlxn/walk 学习3.菜单栏和工具栏的具体实现

本文介绍了使用Go语言的GUI库lxn/walk实现菜单栏和工具栏的具体方法，包括消息窗口的产生、文件放置动作响应和提示框的应用。部分代码来自上一篇博客和lxn/walk官方示例。文章提供了学习GUI开发的实际案例和代码示例。 ... [详细]

蜡笔小新 2023-12-12 20:56:55
text
Express App如何提供不需要的静态文件？

本文介绍了如何使用Express App提供静态文件，同时提到了一些不需要使用的文件，如package.json和/.ssh/known_hosts，并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]

蜡笔小新 2023-12-12 14:38:07
text
Spring学习（4）：Spring管理对象之间的关联关系

本文是关于Spring学习的第四篇文章，讲述了Spring框架中管理对象之间的关联关系。文章介绍了MessageService类和MessagePrinter类的实现，并解释了它们之间的关联关系。通过学习本文，读者可以了解Spring框架中对象之间的关联关系的概念和实现方式。 ... [详细]

蜡笔小新 2023-12-12 13:44:30
spring
基于Socket的多个客户端之间的聊天功能实现方法

本文介绍了基于Socket的多个客户端之间实现聊天功能的方法，包括服务器端的实现和客户端的实现。服务器端通过每个用户的输出流向特定用户发送消息，而客户端通过输入流接收消息。同时，还介绍了相关的实体类和Socket的基本概念。 ... [详细]

蜡笔小新 2023-12-11 15:55:40

丁丽君coolboy

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |

京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区版权所有