Flutter 在同一页面显示List和Grid

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: ListView(
children: <Widget>[
ListTile(
title: Text('data'),
),
ListTile(
title: Text('data'),
),
GridView.count(
primary:
false, // https://api.flutter.dev/flutter/widgets/ScrollView/primary.html
shrinkWrap: true, // 限制约束 https://api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html
crossAxisCount: 3,
children: List<Widget>.generate(
7,
(_) => Container(
color: Colors.red,
margin: const EdgeInsets.all(8),
)),
),
ListTile(
title: Text('data'),
),
ListTile(
title: Text('data'),
),
],
),
);
}
}
or use CustomScrollView
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
ListTile(title: Text("data")),
ListTile(title: Text("data")),
])),
SliverGrid.count(
crossAxisCount: 3,
children: List<Widget>.generate(
7,
(_) => Container(
color: Colors.red,
margin: const EdgeInsets.all(8),
),
),
),
SliverList(
delegate: SliverChildListDelegate([
ListTile(title: Text("data")),
ListTile(title: Text("data")),
])),
],
),
);
}
}
Flutter 在同一页面显示List和Grid的更多相关文章
- 【Flutter学习】页面跳转之路由及导航
一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- destoon公司搜索页面显示公司类型
首先找到前台模板文件:/template/default/company/search.htm 看到51行 {template 'list-company', 'tag'} 打开 /template/ ...
- HTML5中与页面显示相关的API
1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API 是指当页面变为最小 ...
- 转:jsp页面显示中文乱码解决方案
jsp页面显示中文乱码: jsp页面的编码方式有两个地方需要设置: <%@ page language="java" import="java.util.*&quo ...
- js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
- 页面显示(pageshow)和页面隐藏(pagehide)事件
Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度.这个缓存中不仅保存 ...
- jsp页面显示数据库乱码
如何页面是utf-8,数据库也是的话,页面显示数据库乱码的话,就是数据库的格式有问题
- 判断数据库内容,在页面显示自定义数据case when
判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...
随机推荐
- OAuth2.0与前端无感知token刷新实现
前言 OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛的应用.Facebook.Twitter和Google等各种在线服务都提供了基于OAuth规范的认证机制. ...
- MySQL的索引为什么用B+Tree?InnDB的数据存储文件和MyISAM的有何不同?
前言 这篇文章的题目,是我真实在面试过程中遇到的问题,某互联网众筹公司在考察面试者MySQL相关知识的第一个问题,我当时还是比较懵的,没想到这年轻人不讲武德,不按套路出牌,一般的问MySQL的相关知识 ...
- Spring听课笔记(专题一)
Spring入门课程:https://www.imooc.com/learn/196 第0章: Spring是为解决企业应用程序开发复杂性而创建的一个Java开源框架,应用非常广泛.业内非常流行的SS ...
- 安装Archlinux+UEFI启动
为了安装Arch自己也走了很多弯路,找了很多教程,最后探索出了这样一个安装方法,不一定适用于每个人. ArchWiki官方安装手册 本方法全程插上网线. 准备 获取镜像 镜像可以从官网获取,访问官方下 ...
- RESTFul应用分析
Restful API 近年来应用越来越广泛,各大互联网公司纷纷推出了自己的 Restful API 服务. 本文将从实际应用出发,从 REST 到 Restful 再到 Restful API ,逐 ...
- 如何用RabbitMQ实现延迟队列
前言 在 jdk 的 juc 工具包中,提供了一种延迟队列 DelayQueue.延迟队列用处非常广泛,比如我们最常见的场景就是在网购或者外卖平台中发起一个订单,如果不付款,一般 15 分钟后就会被关 ...
- Codeforce 380A Sereja and Prefixes【二分】
题意:定义两种操作 1 a ---- 向序列中插如一个元素a 2 a b ---- 将序列的前a个元素[e1,e2,...,ea]重复b次插入到序列中 经过一列操作后,为处于某个位置p的元素是多少.数 ...
- Long Long Message POJ - 2774 后缀数组
The little cat is majoring in physics in the capital of Byterland. A piece of sad news comes to him ...
- Nginx基础 - Nginx+Lua实现灰度发布与WAF
1.Nginx加载Lua环境默认情况下Nginx不支持Lua模块, 需要安装LuaJIT解释器, 并且需要重新编译Nginx, 建议使用openrestry 1)环境准备 [root@localhos ...
- mysql-画图
目录 阿里数据库产品rds 淘宝数据库架构 数据库下载 Mysql3种安装方法 mysql_install_db安装数据库命令脚本中有生成初始mysql数据 也可以把mysql_install_db集 ...