底部溢出 12 个像素的 RenderFlex

Question

即使在扩展的小部件中也会导致错误，如果我尝试添加滚动视图，那么我的整个屏幕都会变空，可能是由于小部件数量更多。

Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,

    children: <Widget>[
      Expanded(
        child: Row(

          children: [

            Expanded(
              child: ReusableCard(
                onPress: () {
                  setState(() {
                    selectedGender = Gender.male;
                  });
                },
                colour: selectedGender == Gender.male
                    ? kActiveCardColor
                    : kInactiveCardColor,
                cardChild: ReusableCardData(
                  cardIcon: FontAwesomeIcons.mars,
                  cardText: 'Male',
                ),
              ),
            ),
            // SizedBox(
            //   width: 15,
            // ),
            Expanded(
              child: ReusableCard(
                onPress: () {
                  setState(() {
                    selectedGender = Gender.female;
                  });
                },
                colour: selectedGender == Gender.female
                    ? kActiveCardColor
                    : kInactiveCardColor,
                cardChild: ReusableCardData(
                  cardIcon: FontAwesomeIcons.venus,
                  cardText: 'Female',
                ),
              ),
            ),
          ],
        ),
      ),

包含的图像是 UI 中的错误。 请帮我修复它。

Answer 1

SingleChildScrollView(
  child: Row(
    children: [
      Expanded(
        child: ReusableCard(
          onPress: () {
            setState(() {
              selectedGender = Gender.male;
            });
          },
          colour: selectedGender == Gender.male
            ? kActiveCardColor
            : kInactiveCardColor,
          cardChild: ReusableCardData(
            cardIcon: FontAwesomeIcons.mars,
            cardText: 'Male',
          ),
        ),
      ),
      Expanded(
        child: ReusableCard(
          onPress: () {
            setState(() {
              selectedGender = Gender.female;
            });
          },
          colour: selectedGender == Gender.female
            ? kActiveCardColor
            : kInactiveCardColor,
          cardChild: ReusableCardData(
            cardIcon: FontAwesomeIcons.venus,
            cardText: 'Female',
          ),
        ),
      ),
    ],
  )
)

你可以试试这个。