网格视图中带有标题的英雄图片

Question

我有一个包含英雄图片按钮的 GridView。我想在每个下面添加一个标题，但是如果我尝试将英雄放在一个列中，就像下面代码中的 'MenuGrp' class 一样，图像就会消失。如果我尝试在 MenuButton 中完成所有操作 class 会出现不允许将 Hero 放入小部件列表的错误？

import 'dart:ui';
import 'package:flutter/material.dart';

class MenuScreen extends StatelessWidget {
  const MenuScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Menu'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.count(
            crossAxisCount: 3,
            children: const [
              MenuGrp('stocks', 'Properties'),
              MenuButton('clients'),
              MenuButton('checkin'),
              MenuButton('calendar'),
              MenuButton('viewings'),
              MenuButton('offers'),
              MenuButton('reports'),
              MenuButton('calculators'),
              MenuButton('posts'),
            ],
          ),
        ),
      ),
    );
  }
}

class MenuGrp extends StatelessWidget {
  final String indexStr;
  final String labelStr;

  const MenuGrp(this.indexStr, this.labelStr, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MenuButton(indexStr),
        SizedBox(child: Text(labelStr)),
      ],
    );
  }
}

class MenuButton extends StatelessWidget {
  final String indexStr;

  const MenuButton(this.indexStr, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final String imagePath = 'assets/images/$indexStr.png';
    var assetImage = AssetImage(imagePath);
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: SizedBox(
        child: Hero(
          child: Material(
            child: InkWell(
              onTap: () => Navigator.pushNamed(context, '/' + indexStr),
              highlightColor: Colors.blue.withOpacity(0.5),
              splashColor: Colors.blue.withOpacity(0.9),
              //borderRadius: BorderRadius.circular(100),
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: assetImage,
                  ),
                ),
              ),
            ),
          ),
          tag: indexStr,
          flightShuttleBuilder: (
            BuildContext flightContext,
            Animation<double> animation,
            HeroFlightDirection flightDirection,
            BuildContext fromHeroContext,
            BuildContext toHeroContext,
          ) {
            return Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: assetImage,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

感谢您的建议。谢谢

Answer 1

使用 Expanded widget 包裹，然后您就可以看到图像

  class MenuGrp extends StatelessWidget {
  final String indexStr;
  final String labelStr;

  const MenuGrp(this.indexStr, this.labelStr, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: MenuButton(indexStr)),
        SizedBox(child: Text(labelStr)),
      ],
    );
  }
}

网格视图中带有标题的英雄图片

Hero images with captions in grid view

flutter

flutter-layout