扩展的小部件导致其他小部件溢出答案

【问题标题】：Expanded widget causing overflow of other widget扩展的小部件导致其他小部件溢出
【发布时间】：2021-10-15 02:00:50
【问题描述】：

我正在为我的列子项使用扩展小部件：

可重复使用的卡片：

class ReusableCard extends StatelessWidget {

  final Widget cardChild;
  final VoidCallback onTap;
  final Color color;

  ReusableCard({required this.cardChild, required this.onTap, required this.color});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        child: cardChild,
        decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(20)
        ),
        margin: EdgeInsets.all(20),
      ),
    );
  }
}

这是我的主要专栏：

class BMICalculator extends State<MainBmi>{

  Gender selectedGender = Gender.MALE;
  Color maleColorSelected = Colors.black45;
  Color femaleColorSelected = Colors.black45;
  String _sliderValue = "180";
  int _weightValue = 50;
  int _ageValue = 20;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text(
              "BMI Calculator"
            ),
          ),
          body: Center(
            child: Column(
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Expanded(
                        child: ReusableCard(
                          color: selectedGender == Gender.MALE ? Colors.black12 : maleColorSelected,
                          onTap: (){
                            setState(() {
                              selectedGender = Gender.MALE;
                            });
                          },
                          cardChild: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text("MALE", style: TextStyle(fontSize: 20),),
                              SizedBox(
                                height: 30,
                              ),
                              Icon(
                                FontAwesomeIcons.mars,
                                size: 80,
                              )
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        child: ReusableCard(
                          color: selectedGender == Gender.FEMALE ? Colors.black12 : femaleColorSelected,
                          onTap: (){
                            setState(() {
                              selectedGender = Gender.FEMALE;
                            });
                          },
                          cardChild: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text("FEMALE", style: TextStyle(fontSize: 20),),
                              SizedBox(
                                height: 30,
                              ),
                              Icon(
                                FontAwesomeIcons.venus,
                                size: 80,
                              )
                            ],
                          ),
                        )
                      )
                    ]
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    color: reusableCardColor,
                    onTap: (){
                      print("Hello");
                    },
                    cardChild: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "HEIGHT",
                          style: TextStyle(fontSize: 20),
                          textAlign: TextAlign.center,
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          textBaseline: TextBaseline.alphabetic,
                          children: [
                            Text(
                              _sliderValue,
                              style: TextStyle(
                                fontSize: 35,
                                fontWeight: FontWeight.bold,
                                textBaseline: TextBaseline.alphabetic,
                              ),
                            ),
                            Text(
                              "cm",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                                textBaseline: TextBaseline.alphabetic,
                              ),
                            )
                          ],
                        ),
                        SliderTheme(
                          data: SliderThemeData(
                            activeTrackColor: Colors.white,
                            overlayColor: Colors.pink.shade50,
                            inactiveTrackColor: Colors.grey,
                            thumbColor: Colors.pink,
                            thumbShape: RoundSliderThumbShape(
                              enabledThumbRadius: 15,
                            ),
                            overlayShape: RoundSliderOverlayShape(
                              overlayRadius: 30,
                            )
                          ),
                          child: Slider(
                            value: double.parse(_sliderValue),
                            min: 125,
                            max: 264,
                            onChanged: (a){
                              setState(() {
                                _sliderValue = a.toStringAsFixed(1);
                              });
                            },
                          ),
                        )
                      ],
                    )
                  )
                ),
                Expanded(
                  child: Row(
                    children: [
                      Expanded(
                        child: ReusableCard(
                          cardChild: Column(
                            children: [
                              Text(
                                "WEIGHT",
                                style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.white
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              Text(
                                _weightValue.toString(),
                                style: TextStyle(
                                  fontSize: 35,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ReusableFAB(
                                    onTap: (){
                                      setState(() {
                                        _weightValue++;
                                      });
                                    },
                                    iconData: FontAwesomeIcons.plus,
                                  ),
                                  SizedBox(
                                    width: 10,
                                  ),
                                  ReusableFAB(
                                    onTap: (){
                                      setState(() {
                                        _weightValue--;
                                      });
                                    },
                                    iconData: FontAwesomeIcons.minus,
                                  ),
                                ],
                              )
                            ],
                          ),
                          onTap: (){
                            print("hello world");
                          },
                          color: reusableCardColor,
                        ),
                      ),
                      Expanded(
                        child: ReusableCard(
                          cardChild: Column(
                            children: [
                              Text(
                                "AGE",
                                style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.white
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              Text(
                                _ageValue.toString(),
                                style: TextStyle(
                                    fontSize: 35,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ReusableFAB(
                                    iconData: FontAwesomeIcons.plus,
                                    onTap: (){
                                      setState(() {
                                        _ageValue++;
                                      });
                                    },
                                  ),
                                  SizedBox(
                                    width: 20,
                                  ),
                                  ReusableFAB(
                                    iconData: FontAwesomeIcons.minus,
                                    onTap: (){
                                      setState(() {
                                        _ageValue--;
                                      });
                                    },
                                  )
                                ],
                              )
                            ],
                          ),
                          onTap: (){
                            print("hello world");
                          },
                          color: reusableCardColor,
                        ),
                      )
                    ]
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

但是当我添加扩展的 Container 小部件时，一切都从屏幕溢出：

class BMICalculator extends State<MainBmi>{

  Gender selectedGender = Gender.MALE;
  Color maleColorSelected = Colors.black45;
  Color femaleColorSelected = Colors.black45;
  String _sliderValue = "180";
  int _weightValue = 50;
  int _ageValue = 20;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text(
              "BMI Calculator"
            ),
          ),
          body: Center(
            child: Column(
              children: [
                Expanded(
                  child: Row(
                    children: [
                      Expanded(
                        child: ReusableCard(
                          color: selectedGender == Gender.MALE ? Colors.black12 : maleColorSelected,
                          onTap: (){
                            setState(() {
                              selectedGender = Gender.MALE;
                            });
                          },
                          cardChild: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text("MALE", style: TextStyle(fontSize: 20),),
                              SizedBox(
                                height: 30,
                              ),
                              Icon(
                                FontAwesomeIcons.mars,
                                size: 80,
                              )
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        child: ReusableCard(
                          color: selectedGender == Gender.FEMALE ? Colors.black12 : femaleColorSelected,
                          onTap: (){
                            setState(() {
                              selectedGender = Gender.FEMALE;
                            });
                          },
                          cardChild: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text("FEMALE", style: TextStyle(fontSize: 20),),
                              SizedBox(
                                height: 30,
                              ),
                              Icon(
                                FontAwesomeIcons.venus,
                                size: 80,
                              )
                            ],
                          ),
                        )
                      )
                    ]
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    color: reusableCardColor,
                    onTap: (){
                      print("Hello");
                    },
                    cardChild: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "HEIGHT",
                          style: TextStyle(fontSize: 20),
                          textAlign: TextAlign.center,
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          textBaseline: TextBaseline.alphabetic,
                          children: [
                            Text(
                              _sliderValue,
                              style: TextStyle(
                                fontSize: 35,
                                fontWeight: FontWeight.bold,
                                textBaseline: TextBaseline.alphabetic,
                              ),
                            ),
                            Text(
                              "cm",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                                textBaseline: TextBaseline.alphabetic,
                              ),
                            )
                          ],
                        ),
                        SliderTheme(
                          data: SliderThemeData(
                            activeTrackColor: Colors.white,
                            overlayColor: Colors.pink.shade50,
                            inactiveTrackColor: Colors.grey,
                            thumbColor: Colors.pink,
                            thumbShape: RoundSliderThumbShape(
                              enabledThumbRadius: 15,
                            ),
                            overlayShape: RoundSliderOverlayShape(
                              overlayRadius: 30,
                            )
                          ),
                          child: Slider(
                            value: double.parse(_sliderValue),
                            min: 125,
                            max: 264,
                            onChanged: (a){
                              setState(() {
                                _sliderValue = a.toStringAsFixed(1);
                              });
                            },
                          ),
                        )
                      ],
                    )
                  )
                ),
                Expanded(
                  child: Row(
                    children: [
                      Expanded(
                        child: ReusableCard(
                          cardChild: Column(
                            children: [
                              Text(
                                "WEIGHT",
                                style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.white
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              Text(
                                _weightValue.toString(),
                                style: TextStyle(
                                  fontSize: 35,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ReusableFAB(
                                    onTap: (){
                                      setState(() {
                                        _weightValue++;
                                      });
                                    },
                                    iconData: FontAwesomeIcons.plus,
                                  ),
                                  SizedBox(
                                    width: 10,
                                  ),
                                  ReusableFAB(
                                    onTap: (){
                                      setState(() {
                                        _weightValue--;
                                      });
                                    },
                                    iconData: FontAwesomeIcons.minus,
                                  ),
                                ],
                              )
                            ],
                          ),
                          onTap: (){
                            print("hello world");
                          },
                          color: reusableCardColor,
                        ),
                      ),
                      Expanded(
                        child: ReusableCard(
                          cardChild: Column(
                            children: [
                              Text(
                                "AGE",
                                style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.white
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              Text(
                                _ageValue.toString(),
                                style: TextStyle(
                                    fontSize: 35,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  ReusableFAB(
                                    iconData: FontAwesomeIcons.plus,
                                    onTap: (){
                                      setState(() {
                                        _ageValue++;
                                      });
                                    },
                                  ),
                                  SizedBox(
                                    width: 20,
                                  ),
                                  ReusableFAB(
                                    iconData: FontAwesomeIcons.minus,
                                    onTap: (){
                                      setState(() {
                                        _ageValue--;
                                      });
                                    },
                                  )
                                ],
                              )
                            ],
                          ),
                          onTap: (){
                            print("hello world");
                          },
                          color: reusableCardColor,
                        ),
                      )
                    ]
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    color: Colors.pink,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在我将扩展容器添加为子项之前，一切都是正确的。这是什么原因？

这是错误图片：

【问题讨论】：

标签： flutter dart

【解决方案1】：

原因是你没有足够的空间来布置你想要的所有小部件，因为它们有自己的限制。如果屏幕比那个小，您甚至可能会遇到更多问题，或者它可能适合更大的屏幕，但这只是猜测，总的来说这不是一个好习惯。

我建议您从您的Column 子项中删除所有Expanded，并将您的Column 包裹在SingleChildScrollView 中，因为这将是一种更好的方法，并且将提供关于屏幕尺寸的无缝体验。

【讨论】：

但是我已经添加了扩展作为容器的父级，所以它不应该充分利用可用空间吗？
是的，但始终尊重其子约束——例如，如果子约束之一是字体大小为 20 像素的Text，那么这些约束也将得到尊重。如果您的孩子有一个 Container 并且有一个 X 像素的 width 等等，这同样适用。