PageView - 滾動圖形
PageView(
pageSnapping: true,
reverse: true,
scrollDirection: Axis.vertical,
onPageChanged: (current) => (
debugPrint("$current")
),
controller: PageController(
initialPage: 1,
keepPage: false,
viewportFraction: 0.8
),
children: <Widget>[
Container(
color: Colors.purple,
child: Text("第一個",style: TextStyle(color: Colors.white),),
),
Container(
color: Colors.purple,
child: Text("第二個",style: TextStyle(color: Colors.white),),
), Container(
color: Colors.purple,
child: Text("第三個",style: TextStyle(color: Colors.white),),
)
],
);
image.png
GridView - 網(wǎng)格視圖
1. 通過GridView.count 生成
class MyGridView extends StatelessWidget{
List<Widget> _buildChildren(int length){
return List.generate(length, (int index) {
return Container(
alignment: Alignment(0, 0),
color: Colors.grey,
child: Text(
"item $index",
),
);
});
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 3,
scrollDirection: Axis.vertical,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0,
children: _buildChildren(100),
);
}
}
2. 通過GridView.builder生成
class MyGridBuilder extends StatelessWidget{
@override
Widget build(BuildContext context) {
return GridView.builder(
itemBuilder: _build,
itemCount: 100,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16.0,
mainAxisSpacing: 16.0
),
);
}
Widget _build(BuildContext context, int index) {
return Container(
alignment: Alignment(0, 0),
color: Colors.grey,
child: Text(
"items $index",
),
);
}
}
Padding 小部件 可以設(shè)置padding
Material 小部件
