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字段,内容是月桂的,显示嫦娥,其他的显 ...
随机推荐
- maven pom文件的 name 标签 和 url标签到底是什么作用
- python 中excel表格的操作【转载】
传说中python操作ms office功能最强大的是win32com,但只能要ms上使用. 不过对于比较简单的需求显得有些小题大作.那么来看下简单的,分别是xlrd和xlwt模块, 不过暂时只支持e ...
- 上海某小公司面试题:Java线程池来聊聊
<对线面试官>系列目前已经连载11篇啦!进度是一周更新两篇,欢迎持续关注 [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反 ...
- centos7 快速搭建redis集群环境
本文主要是记录一下快速搭建redis集群环境的方式. 环境简介:centos 7 + redis-3.2.4 本次用两个服务6个节点来搭建:192.168.116.120 和 192.168.1 ...
- 基础知识——TCP协议
七层网络模型:物理层,数据链路层,网络层,传输层,会话层,表示层,应用层. 五层网络模型: 1. 应用层:确定进程之间通信的性质以满足用户需求.(各种传输协议) 2. 运输层:负责主机间不同进程的通信 ...
- C/C++ ===复习==函数返回值问题(集合体==网络)
按值传递 地址传递: 应该明白只有这2种传递,下面讨论函数的按值传递 #include <stdio.h> #include <stdlib.h> int add_rtVal( ...
- 数组赋值到select
function _oneClassData() { var options = []; $(oneClass).each(function (i, item) { var option = {}; ...
- DEDECMS:删除DEDE自带的织梦链方法
在include/taglib/flinktype.lib.php里删除掉如下代码: $dedecms = false; $dedecms->id = 999; $dedecms->typ ...
- linux 一分钟搭建zookeeper linux 单机版(亲测可用)
wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.4.14/zookeeper-3.4.14.tar.gzt ...
- 设计模式(十七)——迭代器模式(ArrayList 集合应用源码分析)
1 看一个具体的需求 编写程序展示一个学校院系结构:需求是这样,要在一个页面中展示出学校的院系组成,一个学校有多个学院, 一个学院有多个系.如图: 2 传统的设计方案(类图) 3 传统的方式的问题分析 ...