Flutter项目——静态页面布局4详情页
详情页
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// widget代表了我们的 MovieDetail 这个类
// 当前类是控制器，需要用 widget.属性名 来访问被控制的类接收到的参数
title: Text('${widget.name}'),
),
// 因为从上到下的排版很长，超过一屏幕的高度，因此不能使用 Column，Column高度会溢出
body: ListView(
children: <Widget>[
// 第一个图片
Padding(
padding: EdgeInsets.fromLTRB(80, 80, 80, 30),
child: Container(
height: 270,
child: Image(
fit: BoxFit.cover,
// true 得到数据了, 使用正常数据
// false 没有数据, 渲染loading图
image: _reqflag
? NetworkImage('${_resetimg(_mapdata["img"])}')
: AssetImage('images/loading.png'),
),
),
),
// 之后一个个往后排列我们的文字
TextSection(title: '名称', text: '${widget.name}'),
TextSection(title: '年代', text: '${_map["year"]}'),
TextSection(title: '产地', text: '${_map["src"]}'),
TextSection(title: '类别', text: '${_map["cat"]}'),
TextSection(title: '语言', text: '${_map["language"]}'),
TextSection(title: '上映日期', text: '${_map["comingTitle"]}'),
TextSection(title: '豆瓣评分', text: '${_map["sc"]}'),
TextSection(title: '片长', text: '${_map["howLong"]}'),
TextSection(title: '导演', text: '${_map["director"]}'),
TextSection(title: '主演', text: '${_map["star"]}', axisFlag: true),
TextSection(
title: '简介',
text: '${_reqflag ? _mapdata["dra"] : _map["dra"]}',
axisFlag: true),
],
),
);
}
String _resetimg(img) => img.replaceAll('/w.h/', '/');
}
// 我们把下面纵向的排列的文本进行了一次封装
class TextSection extends StatelessWidget {
TextSection({
Key key,
@required this.title,
@required this.text,
this.axisFlag,
}) : super(key: key);
final String title;
final String text;
final bool axisFlag;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
child: Row(
// 纵轴对齐,但是需要单独处理，只有主演项和简介内容区域的时候才适合
// 所以根据传递过来的参数确实使用顶部对齐或者是中间对齐
crossAxisAlignment: axisFlag == true
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: <Widget>[
// 左半部分是 title
Container(
width: 89,
child: Text('◎ ${_titleReset(title)}'),
),
// 右半部分是内容
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 0),
child: Text('$text'),
),
),
],
),
);
}
String _titleReset(String title) {
if (title.length == 2) {
return '${title[0]} ${title[1]}';
} else {
return title;
}
}
}
Flutter项目——静态页面布局4详情页相关推荐
- vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
- 尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
- 关于 静态页面布局 中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
- 前端实习周记1---环境配置、静态页面、作品呈现页
一.环境配置 刚去公司实习,先配发了电脑,之后导师让自己先配置一下公司域网.配置VS.node.git环境 1.node安装 node一定要安装低一些的版本,下载地址: https://nodejs. ...
- 美食杰项目（四）美食详情页
目录 前言: 具体样式 实现效果 代码思路 相应的组件 相关代码 总结: 前言: 本节给大家讲的是美食杰项目的美食详情页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂有所收获 具体样 ...
- Django电商项目（六）商品详情页、列表页分页、商品搜索
Django电商项目 商品详情页 商品列表页 商品搜索 全文检索 安装和配置 索引文件生成 全文检索的使用 改变分词方式 商品详情页 新建detail.html {% extends 'base_de ...
- Vue项目构造页面布局
这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 的视频再自己动手进行实践的 Element plus 提供了很多页面的布局,Element plus 为了方便开发人员使用 ...
- php商品详情显示页面代码,商品详情页是怎么生成的？
个人理解,有两种形式: 1.从后端开发的角度来看,一般来说,某个商品详情页后端代码一般是这样的 // Action (C) public class Product{ //商品详情页方法 functi ...
- 《前端框架开发技术》HTML+CSS+JavaScript (站酷静态页面官网7页)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
最新文章
- C/C++难题的高赞回答「中文版」，帮你整理好了
- 滨海宣传员——青龙羊毛
- python语言特点有哪些-Python是什么？Python有什么特点？
- myeclipse创建项目 我们的第一个代码
- Qt入门（六）——抽奖系统的实现
- Oracle之rollUp函数
- 走进音视频的世界——新一代开源编解码器AV1
- 前端工程师薪资差距可达7.3倍！4月程序员薪资统计出炉，速看！
- 密码学-密钥管理与分发
- linux shell fflush,強制shell腳本fflush
- js eq()选择器的使用
- GPU渲染管线与可编程着色器
- 移动端适配：font-size设置方案的理解（浏览器调试移动端网页工具使用）
- STM32F407配置PLLI2SCLK实现特定50MHz时钟驱动83848
- BRL_CAD 教程
- 郭敬明最经典的45句话
- 北理工计算机2020学硕录取,北京理工大学2020硕士研究生拟录取名单
- 前端HTMLtable标签的属性和使用
- 乌班图安装出现无法获取锁解决
- unity ulua基础(ulua介绍，lua与C#互相调用)