活动入口为什么不用grid view来实现？

来源：9-8 活动入口实现

生生不息paul

2024-02-24

活动入口为什么不用grid view来实现？如果用这个来实现会有什么问题？
貌似grid 的每个item尺寸都是正方形，不受item的高度控制，很奇怪

import 'package:flutter/material.dart';
import 'package:flutter_list_demo/gridview_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
          appBar: AppBar(
            title: Text('appbarTitle'),
          ),
          body: GridViewPage()),
    );
  }
}
class GridViewPage extends StatelessWidget {
  const GridViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: 20,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.blueAccent,
          height: (index % 3 + 1) * 20.0, // example logic for variable height
          child: Center(
            child: Text('Item $index'),
          ),
        );
      },
    );
  }

图片描述

写回答

2回答

中律十七

2024-03-02

已采纳

GridView每个子元素的宽高是自动计算的，不收子元素内部宽高影响，宽高比默认是1:1，通过 childAspectRatio 属性控制。下面代码就是宽/高 = 2/1

import 'package:flutter/material.dart';

class CustomGridView extends StatelessWidget {
  CustomGridView({super.key});

  final List<Color> data = List.generate(128, (i) => Color(0xFFFF00FF - 2 * i));

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(7, 0, 7, 4),
      child: GridView.count(
        crossAxisCount: 2,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        childAspectRatio: 100 / 50,
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
        alignment: Alignment.center,
        color: color,
        child: Text(
          colorString(color),
          textAlign: TextAlign.center,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
            shadows: [
              Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
            ],
          ),
        ),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}