PageView页面视图
class PageViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PageView(
// pageSnapping: false, //false页面不会自动翻过去或者弹回来
// reverse: true, //反转页面序号 ,第一页成了最后一个,最后一个成了第一个
// scrollDirection: Axis.vertical,//垂直滑动
// scrollDirection: Axis.horizontal,//横向滑动
onPageChanged: (currentPage) => debugPrint("页面改变了$currentPage"),
controller: PageController(
initialPage: 2, //默认显示的页面
viewportFraction: 0.85, //默认页面显示比例 1.0为整个页面
),
children: <Widget>[
Container(
color: Colors.brown[900],
alignment: Alignment(0.0, 0.0),
child: Text(
"One",
style: TextStyle(fontSize: 32.0, color: Colors.white),
),
),
Container(
color: Colors.grey[900],
alignment: Alignment(0.0, 0.0),
child: Text(
"Two",
style: TextStyle(fontSize: 32.0, color: Colors.white),
),
),
Container(
color: Colors.blueGrey[900],
alignment: Alignment(0.0, 0.0),
child: Text(
"Three",
style: TextStyle(fontSize: 32.0, color: Colors.white),
),
),
],
);
}
}
PageView.build 按需生成页面
import 'package:flutter/material.dart';
import 'package:flutter_applist/model/post.dart';
class ViewDemo extends StatelessWidget {
/**
* index 索引值
* 返回值为widget
*/
Widget _pageItemBuild(BuildContext context, int index) {
return Stack(
children: <Widget>[
SizedBox.expand(
//用盒子包裹 充满整个空间
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
),
Positioned(
bottom: 8.0,
left: 8.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(posts[index].title,style: TextStyle(fontWeight: FontWeight.bold),),
Text(posts[index].author,),
],
),
),
],
);
}
@override
Widget build(BuildContext context) {
// return PageViewDemo();
return PageView.builder(
itemCount: posts.length, //确定数量
itemBuilder: _pageItemBuild,
);
}
}
用PageView.builder创建
class PageViewbuilderDemo extends StatelessWidget {
/**
* index 索引值
* 返回值为widget
*/
Widget _pageItemBuild(BuildContext context, int index) {
return Stack(
children: <Widget>[
SizedBox.expand(
//用盒子包裹 充满整个空间
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
),
Positioned(
bottom: 8.0,
left: 8.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
posts[index].title,
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
posts[index].author,
),
],
),
),
],
);
}
@override
Widget build(BuildContext context) {
return PageView.builder(
itemCount: posts.length, //确定数量
itemBuilder: _pageItemBuild,
);
}
}
用GridView.count创建GridView
class GridViewCountDemo extends StatelessWidget {
List<Widget> _buildTiles(int length) {
return List.generate(length, (int index) {
return Container(
color: Colors.red,
alignment: Alignment(0.0, 0.0),
child: Text(
"我是$index",
style: TextStyle(fontSize: 18.0, color: Colors.grey),
),
);
});
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 3, //一行显示多少个
crossAxisSpacing: 16.0, //左右间距
mainAxisSpacing: 16.0, //上下间距
// scrollDirection: Axis.horizontal,//设置成水平滚动
children: _buildTiles(10000),
);
}
}
用GridView.extent创建GridView
class GridViewExtendDemo extends StatelessWidget {
List<Widget> _buildTiles(int length) {
return List.generate(length, (int index) {
return Container(
color: Colors.blue,
alignment: Alignment(0.0, 0.0),
child: Text(
"我是$index",
style: TextStyle(fontSize: 18.0, color: Colors.grey),
),
);
});
}
@override
Widget build(BuildContext context) {
return GridView.extent(
maxCrossAxisExtent: 180.0,
crossAxisSpacing: 16.0, //左右间距
mainAxisSpacing: 16.0, //上下间距
children: _buildTiles(10000),
);
}
}
用GridView.builder创建GridView
class GridViewBuilderDemo extends StatelessWidget {
Widget _gridItemBuilder(BuildContext context, int index) {
return Container(
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover, //设置
),
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
padding: EdgeInsets.all(3.0),
itemCount: posts.length,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100,
mainAxisSpacing: 3.0,
crossAxisSpacing: 8.0,
),
/* gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 3.0,
crossAxisCount: 3,
crossAxisSpacing: 8.0,
),*/
itemBuilder: _gridItemBuilder);
}
}