例子1:
SliverGridDelegateWithMaxCrossAxisExtent 效果图:
<code>import 'dart:math'; import 'package:flutter/material.dart'; main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text("GrideView"), centerTitle: true, ), body: const MyHomePage(), ), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GridView( gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 100,//苹果手机宽是414像素,所以有4个 mainAxisSpacing: 8, crossAxisSpacing: 8, childAspectRatio: 1.8 //宽高比 ), children: List.generate(100, (index){ return Container( color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)), ); }), ); } }</code>
例子2:
SliverGridDelegateWithFixedCrossAxisCount 效果图:
<code>import 'dart:math'; import 'package:flutter/material.dart'; main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text("GrideView"), centerTitle: true, ), body: const MyHomePage(), ), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GridView( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, //交叉轴排版数 mainAxisSpacing: 20,//主轴间距 crossAxisSpacing: 10, //交叉轴间距 childAspectRatio: 0.8 //宽高比例 ), children: List.generate(100, (index){ return Container( color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)), ); }), ) ; } }</code>
<code>import 'dart:math'; import 'package:flutter/material.dart'; main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text("GrideView"), centerTitle: true, ), body: const MyHomePage(), ), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 8, crossAxisSpacing: 8, childAspectRatio: 1.5 ), itemBuilder: (BuildContext context, int index){ return Container( color: Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255), Random().nextInt(255)), ); } ) ; } }</code>
文章评论