在颤动中为堆栈创建小部件类

Question

我有一个 5 堆栈在颤振，我想在 ui 中调用类。 我不想在ui中写很多堆栈。

我写了这个但不工作。 谁能知道我该怎么做？ . . . . . . . . .

。 . .. . . . . .

.. . . . . .

这是我在 ui 中的代码的一部分：

 Expanded(
            child: GridView(
              padding: EdgeInsets.only(top: 0, bottom: 0, left: 25, right: 25),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 15,
                mainAxisSpacing: 15,
                childAspectRatio: 2.5,
              ),
              scrollDirection: Axis.vertical,
              children: <Widget>[
                InkWell(
                 child: ImageCard("b.jpg","some",ListOfEpisode),
                ),

这是它的类：

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

class ImageCard extends StatefulWidget {
  ImageCard(String nameCard, String clickCard, Type imageName);

  get nameCard => null;
  get clickCard => null;
  get imageName => null;

  @override
  _ImageCardState createState() => _ImageCardState(imageName,nameCard,clickCard);
}

class _ImageCardState extends State<ImageCard> {
  _ImageCardState(imageName, nameCard, clickCard);

  String? get imageName => null;
  String? get nameCard => null;
  get clickCard => null;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Stack(children: <Widget>[
        Container(
          height: 300,
          width: 200,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              image: DecorationImage(
                image: AssetImage(
                  'assets/images/' + imageName!,
                ),
                fit: BoxFit.cover,
              )),
          child: Center(
            child: Text(
              " " + nameCard!,
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ]),
      onTap: () {
        clickCard;
      },
    );
  }
}

我明白了：

Answer 1

get nameCard => null; 表示它将始终返回 null，这就是您收到错误消息的原因。

如果您想检查空值，请将其设为可空，例如 final String? imageName;

在使用它时，请确保它不会获得空值，这是通过在末尾添加 bang ! 来承诺的简单方法。但是如果你不确定，你可以提供一个默认值，比如imageName?? "defaultValue"

小部件

class ImageCard extends StatelessWidget {
  final String? imageName;
  final String? nameCard;
  final Function clickCard;

  const ImageCard({
    Key? key,
    this.imageName,
    this.nameCard,
    required this.clickCard,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Stack(
        children: <Widget>[
          Container(
            height: 300,
            width: 200,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                image: DecorationImage(
                  image: AssetImage(
                    'assets/images/${imageName ?? "default image"}',
                  ),
                  fit: BoxFit.cover,
                )),
            child: Center(
              child: Text(
                " ${nameCard ?? "defaultCardname"}",
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
      onTap: () {
        clickCard();
      },
    );
  }
}

用例

GridView(
        padding: EdgeInsets.only(top: 0, bottom: 0, left: 25, right: 25),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 15,
          mainAxisSpacing: 15,
          childAspectRatio: 2.5,
        ),
        scrollDirection: Axis.vertical,
        children: <Widget>[
          ImageCard(
            clickCard: () {
              print("item pressed X ");
            },
            imageName: "name",
            nameCard: "cardname",
          ),
          ...List.generate(
            12,
            (index) => ImageCard(
              clickCard: () {
                print("item pressed $index ");
              },
              imageName: "name  $index",
              nameCard: "cardname $index",
            ),
          )
        ],
      ),

Answer 2

您正在从 getter 返回 null。这就是您收到此错误的原因。我不确定你为什么需要吸气剂。 但是这段代码可以工作

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

    class ImageCard extends StatefulWidget {
    String nameCard;
    String clickCard; 
    String imageName;

    ImageCard(this.nameCard, this.clickCard, this.imageName);
    
    @override

   _ImageCardState createState() => _ImageCardState(imageName,nameCard,clickCard);

}

class _ImageCardState extends State<ImageCard> {
    String nameCard;
    String clickCard; 
    String imageName;

    _ImageCardState(this.nameCard, this.clickCard, this.imageName);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Stack(children: <Widget>[
        Container(
          height: 300,
          width: 200,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              image: DecorationImage(
                image: AssetImage(
                  'assets/images/' + imageName,
                ),
                fit: BoxFit.cover,
              )),
          child: Center(
            child: Text(
              " " + nameCard!,
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ]),
      onTap: () {
        clickCard;
      },
    );
  }
}