15 Flutter仿京东商城项目 搜索页面布局
Search.dart
import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdaper.dart'; class SearchPage extends StatefulWidget {
SearchPage({Key key}) : super(key: key); _SearchPageState createState() => _SearchPageState();
} class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Container(
child: TextField(
autofocus: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(),
borderSide: BorderSide.none)),
),
height: ScreenAdaper.height(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.8),
borderRadius: BorderRadius.circular()),
),
actions: <Widget>[
InkWell(
child: Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
child: Row(
children: <Widget>[Text('搜索')],
),
),
onTap: () {},
)
],
),
body: Container(
padding: EdgeInsets.all(),
child: ListView(
children: <Widget>[
Container(
child: Text('热搜', style: Theme.of(context).textTheme.title),
),
Divider(),
Wrap(
children: <Widget>[
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
)
],
),
SizedBox(height: ),
Container(
child: Text('历史记录', style: Theme.of(context).textTheme.title),
),
Divider(),
Column(
children: <Widget>[
ListTile(
title: Text('女装'),
),
Divider(),
ListTile(
title: Text('女装'),
),
Divider(),
ListTile(
title: Text('女装'),
),
Divider(),
ListTile(
title: Text('女装'),
),
Divider(),
],
),
SizedBox(height: ),
InkWell(
onTap: (){ },
child: Container(
width: ScreenAdaper.width(),
height: ScreenAdaper.height(),
decoration: BoxDecoration(
border: Border.all(color: Colors.black54, width: )),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.delete), Text('清空历史记录')],
),
),
)
],
),
));
}
}
15 Flutter仿京东商城项目 搜索页面布局的更多相关文章
- 07-08 Flutter仿京东商城项目 商品分类页面布局:Flutter仿京东商城项目 商品分类页面数据渲染
Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...
- 37 Flutter仿京东商城项目 结算页面布局
加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 CheckOut.dart import 'package:flutter/material.dart'; impo ...
- 25 Flutter仿京东商城项目 购物车页面布局
加群452892873 下载对应25课文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter_swi ...
- 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...
- 16 Flutter仿京东商城项目 跳转到搜索页面实现搜索功能 以及搜索筛选
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 14 Flutter仿京东商城项目 头部搜索导航布局 修改主题 修正ScreenAdapter类
main.dart import 'package:flutter/material.dart'; import 'routes/router.dart'; void main() => run ...
- 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局
效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...
- 17 Flutter仿京东商城项目 保存历史搜索记录 删除历史记录 清空历史记录 长按删除
Storage.dart import 'package:shared_preferences/shared_preferences.dart'; class Storage{ static Futu ...
- 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
随机推荐
- CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
python2.7 yum install -y zlib zlib-devel openssl openssl-devel mysql-devel gcc gcc-c++ wget https:// ...
- Nginx 优化详解
一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu计 ...
- linux服务器管理
1.找出目前系统开启的网络服务有哪些? netstat -tulp 2.找出所有的有监听网络的服务(包含socket状态) Netstat -lnp 3.查看所有的服务状态 Service –-sta ...
- PHP获取不到url传递参数中#&等特殊字符解决方法
有些符号在URL中是不能直接传递的,无法传入PHP处理,比如#&等符号,通过$_GET是获取不到的,比如一个域名https://localhost/url.php?url=yangyufei+ ...
- Dijkstra算法和Floyd算法
一.简介 迪杰斯特拉(Dijkstra)算法和弗洛伊德(Flyod)算法均是用于求解有向图或无向图从一点到另外一个点最短路径. 二.Dijkstra 迪杰斯特拉算法也是图论中的明星算法,主要是其采用的 ...
- vue1 get,post交互及百度下拉列表demo
- 2019ICPC区域赛(银川)总结
2019ICPC银川 作为第一次打区域赛的我,心情异常激动,加上学校给坐飞机(事实上赶飞机很痛苦). 热身赛很难受,oj上不去,写AC自动机输入没写好.. 现场赛,开场直觉倒着看,发现签到.然后看B, ...
- maven工程中dubbo与spring整合
1)引入相应jar包 <!-- 引入dubbo服务 start--> <dependency> <groupId>com.alibaba</groupId&g ...
- Js 提交 form 表单
本文主要讲如何使用Js提交表单,在使用ajax进行异步验证的多数情况下,需要使用Js提交表单,以下简单说几种提交表单的方式: 1.document.getElementById("formI ...
- final详解
final的含义? final:java中的关键字,意为“终态的”或者“无法改变的”.可用来修饰类.变量.方法. 变量(成员变量.静态变量.局部变量) 注意: 1.final变量即为常量,通常常量名大 ...