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,
              ))
        ]);
  }

}