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

Question

活动入口为什么不用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'),
          ),
        );
      },
    );
  }

Answer 1

中律十七 2024-03-02 22:48:18

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()}";
}

如果GridView内部每个子元素的内容等比缩放会变形的话，要适配不同屏幕，应该写个算法动态计算每行个数。

• 提问者 生生不息paul #1

  非常感谢！

Answer 2

CrazyCodeBoy 2024-02-25 16:28:14

用gridview可以实现，而且更加简单。这里之所以没用gridview这个轮子，主要是为了讲解在不同场景下自定义布局以及动态布局的做法和经验。

• 提问者 生生不息paul #1

  我尝试使用了GridView，
      // return GridView.count(
      //   physics: const NeverScrollableScrollPhysics(),
      //   crossAxisCount: 5,
      //   children: items,
      // );
  但是发现效果没有达到预期，上下两行的间距特别大，看了下视图层级，发现是每个item显示的高度都自动显示为80，就算改了整个容器大小也是最小80。
  我试了前几节课讲的那个GridView的demo也是这个问题；
  因为gridView没法指定item的尺寸，所以它的自动布局感觉不尽如人意，不知道是不是我的写法有问题。

• CrazyCodeBoy 回复 提问者 生生不息paul #2

  试试这个
  import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Variable Height GridView'),
          ),
          body: VariableHeightGrid(),
        ),
      );
    }
  }
  
  class VariableHeightGrid extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return GridView.builder(
        itemCount: 20,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.blueAccent,
            height: (index % 3 + 1) * 50.0, // example logic for variable height
            child: Center(
              child: Text('Item $index'),
            ),
          );
        },
      );
    }
  }

• 提问者 生生不息paul 回复 CrazyCodeBoy #3

  试了，我看还是没有什么作用，这个grid的item尺寸并不受Container 的height的控制，不管怎么设置，item都是正方形的

点开查看后面2条评论