Flutter 中没有错误，但未显示自定义小部件

Question

我正在尝试制作 ResuseableCard 自定义小部件和 IconContent 自定义小部件。

问题：可重复使用的卡是空的。 IconContent 未显示在 ReusueableCard 内

我尝试过的：我也未能在可重复使用的卡片中创建一个 cardChild 属性，该属性有一个包含图标、大小框和 label 的列。 当我尝试这个时，我没有看到任何错误，但卡片仍然是空的！

什么有效：当 ReuseableCard（没有单独的 IconContent 小部件或 cardChild 属性）中说明所有内容时，它就可以工作。 但是所有的卡片看起来都一样。 另一件有效的事情是分别对每张卡进行编码。 我不想重复代码。 我遵循的教程有效，为什么我的代码不起作用？

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

const bottomContainerHeight = 80.0;
const activeCardColor = Color(0xFF1D1E33);
const bottomContainerColor = Color(0xFFEB1555);
const labelColor = Color(0xFF76FF03);

class InputPage extends StatefulWidget {
@override

_ InputPageState createState() => _InputPageState(); }

class _InputPageState extends State<InputPage> {
@override


Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF0A0E21),
          title: Text('BMI CALCULATOR'),
          centerTitle: true,
        ),
        body: Column(
          children: [
            Expanded(
                child: Row(children: [
              Expanded(
                child: ReuseableCard(
                  colour: activeCardColor,
                  cardChild: IconContent(FontAwesomeIcons.venus, 'Female'),
                ),
              ),
              Expanded(
                  child: ReuseableCard(
                colour: activeCardColor,
                cardChild: Column(children: [
                  Icon(FontAwesomeIcons.mars, size: 80.0),
                  SizedBox(height: 15.0),
                  Text('Male',
                      style: TextStyle(
                          fontSize: 18.0, color: (Color(0xFF8d8E98)))),
                ]),
              )),
            ])),
            Expanded(
              child: ReuseableCard(colour: activeCardColor),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(colour: activeCardColor),
                  ),
                  Expanded(
                    child: ReuseableCard(colour: activeCardColor),
                  )
                ],
              ),
            ),
            Container(
              color: bottomContainerColor,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: 80.0,
            )
          ],
        ));
  }
}

class ReuseableCard extends StatelessWidget {
  ReuseableCard({@required colour, cardChild});
  Color? colour;
  Widget? IconContent;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: IconContent,
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
            color: Color(0xFF1D1E33),
            borderRadius: BorderRadius.circular(10.0)));
  }
}

class IconContent extends StatelessWidget {
  IconData? data;
  String label = 'label';

  IconContent(data, label);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(data, size: 80.0),
          SizedBox(height: 15.0),
          Text(label,
              style: TextStyle(
                fontSize: 18.0,
                color: labelColor,
              ))
        ]);
  }
}

Answer 1

我认为这会做到。

class ReuseableCard extends StatelessWidget {
  ReuseableCard({Key? key,required this.colour, this.cardChild}) : super(key: key);
  final Color colour;
  final Widget? cardChild;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: cardChild?? const SizedBox(),
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
            color: Color(0xFF1D1E33),
            borderRadius: BorderRadius.circular(10.0)));
  }
}

当你使用

必需的

你不必说它可以是 null，如果它可以是 null，也不要直接使用小部件。 如果您在设计方面需要更多帮助，请向我们提供您尝试创建的 UI 设计。

Answer 2

您没有正确定义 cardChild 并且没有在 ReuseableCard 中调用它。 我已经按照以下代码中的要求填写了所有字段。

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

const bottomContainerHeight = 80.0;
const activeCardColor = Color(0xFF1D1E33);
const bottomContainerColor = Color(0xFFEB1555);
const labelColor = Color(0xFF76FF03);

class InputPage extends StatefulWidget {
@override
_ InputPageState createState() => _InputPageState(); }

class _InputPageState extends State<InputPage> {
@override
 


Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF0A0E21),
          title: Text('BMI CALCULATOR'),
          centerTitle: true,
        ),
        body: Column(
          children: [
            Expanded(
                child: Row(children: [
                  Expanded(
                    child: ReuseableCard(
                      colour: activeCardColor,
                      cardChild: IconContent(data:FontAwesomeIcons.venus,label: 'Female'),
                    ),
                  ),
                  Expanded(
                      child: ReuseableCard(
                        colour: activeCardColor,
                        cardChild: Column(children: [
                          Icon(FontAwesomeIcons.mars, size: 80.0),
                          SizedBox(height: 15.0),
                          Text('Male',
                              style: TextStyle(
                                  fontSize: 18.0, color: (Color(0xFF8d8E98)))),
                        ]),
                      )),
                ])),
            Expanded(
              child: ReuseableCard(colour: activeCardColor),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(colour: activeCardColor),
                  ),
                  Expanded(
                    child: ReuseableCard(colour: activeCardColor),
                  )
                ],
              ),
            ),
            Container(
              color: bottomContainerColor,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: 80.0,
            )
          ],
        ));
  }
}

   
class ReuseableCard extends StatelessWidget {
  ReuseableCard({@required this.colour,@required this.cardChild});
  Color? colour;
  Widget? cardChild;//cardChild defined here so the ReuseableCard can use it

  @override
  Widget build(BuildContext context) {
    return Container(
        child: cardChild,//called here
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
            color: Color(0xFF1D1E33),
            borderRadius: BorderRadius.circular(10.0)));
  }
}

class IconContent extends StatelessWidget {
  IconData? data;
  String? label;

  IconContent({@required this.data, @required this.label});

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(data, size: 80.0),
          SizedBox(height: 15.0),
          Text(label??"label",
              style: TextStyle(
                fontSize: 18.0,
                color: labelColor,
              ))
        ]);
  }

}