文章目录
1.PageView页面视图
import 'package:flutter/material.dart';
class PageViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return PageView(
pageSnapping: false, //弹簧效果,默认开启
reverse: true, //最后一页,会变成第一页,第一页变成最后一页
scrollDirection: Axis.vertical, //滚动方向,垂直,默认水平
onPageChanged: (currentPage) =>
debugPrint('Page:$currentPage'), //滑动改变到对应页,会触发回调
controller: PageController(
initialPage: 1, //初始显示的页面,默认是0,第一个
keepPage: false, //默认会记住用户滚动到哪个页面,可以设置为false
viewportFraction: 0.85, //占用的比列,滚动方向
),
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.brown[900],
alignment: Alignment(0.0, 0.0),
child: Text(
'TWO',
style: TextStyle(fontSize: 32.0, color: Colors.white),
),
),
Container(
color: Colors.brown[900],
alignment: Alignment(0.0, 0.0),
child: Text(
'THREE',
style: TextStyle(fontSize: 32.0, color: Colors.white),
),
),
]);
}
}
2.PageView.builder 按需生成页面
可以用model的形式产生视图
图片没生成是因为网站链接出问题。
import 'package:flutter/material.dart';
import '../model/post.dart';
class ViewDemo extends StatelessWidget {
Widget _pageItemBuilder(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) {
// TODO: implement build
return PageView.builder(
itemCount: posts.length,
itemBuilder: _pageItemBuilder,
);
}
}
3.网格视图
3.1 GridView.count
class ViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
//创建网格视图最方便的是GridView.count
crossAxisCount: 3, //对于网格视图crossAxis是水平方向3个
crossAxisSpacing: 16.0, //添加一点边距
mainAxisSpacing: 16.0,//对于网格视图crossAxis是垂直方向
children: <Widget>[
Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
), //可以复制几份Container
Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
),
Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
),
Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
),
Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
),
],
);
}
}
用方法生成网格视图
class ViewDemo extends StatelessWidget {
List<Widget> _buildTitles(int length) {
return List.generate(length, (int index) {
return Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
);
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
//创建网格视图最方便的是GridView.count
crossAxisCount: 3, //对于网格视图crossAxis是水平方向3个
crossAxisSpacing: 16.0, //添加一点边距
mainAxisSpacing: 16.0, //对于网格视图crossAxis是垂直方向
children: _buildTitles(100),
);
}
}
GridViewExtent
方式和GridViewCount类似
class GridViewExtentDemo extends StatelessWidget {
List<Widget> _buildTitles(int length) {
return List.generate(length, (int index) {
return Container(
color: Colors.grey[300],
alignment: Alignment(0.0, 0.0),
child: Text(
'Item',
style: TextStyle(fontSize: 18.0, color: Colors.red),
),
);
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.extent(
//和GridView.count类似
maxCrossAxisExtent: 150.0, //在交叉轴上的最大尺寸
crossAxisSpacing: 16.0, //添加一点边距
mainAxisSpacing: 16.0, //对于网格视图crossAxis是垂直方向
//scrollDirection: Axis.horizontal, //设置主轴
children: _buildTitles(100),
);
}
}
按需生成视图项目
按gride=view.count或者gridview.extent生成的网格视图,他们的网格数量是固定的。可以用gridviewbuilder按需生成视图项目