UI Flutter 中的黑框

Question

我对 Flutter 还很陌生。

突然间，我的屏幕上突然出现一个黑框，后面有一段文字。 我也对我的应用程序的一个月前版本进行了交叉检查，但令人惊讶的是它也出现在旧版本中。 谁能帮我解决这个问题吗？非常感谢:祈祷:

我尝试执行该应用程序的一个月前版本，但它也突然出现在那里。

这是显示上述小部件的代码。

@override
Widget build(BuildContext context) {
  double progressPercentage = (_nutriPoints / _dailyGoal).clamp(0.0, 1.0);
  Color progressColor = Color(0xFF1731B8); // New color #1731B8

  return SizedBox(
    width: widget.size ?? MediaQuery.of(context).size.width * 0.8,
    height: widget.size ?? MediaQuery.of(context).size.width * 0.8,
    child: _errorMessage.isNotEmpty
        ? Center(
            child: Text(
              _errorMessage,
              style: TextStyle(color: Colors.red),
            ),
          )
        : Stack(
            alignment: Alignment.center,
            children: [
              MultiCircularSlider(
                size: widget.size ?? MediaQuery.of(context).size.width * 0.8,
                progressBarType: MultiCircularSliderType.circular,
                values: [progressPercentage],
                colors: [progressColor],
                showTotalPercentage: false,
                animationDuration: const Duration(milliseconds: 1000),
                animationCurve: Curves.easeInOutCirc,
                trackColor: progressColor.withOpacity(0.1),
                progressBarWidth: 20.0,
                trackWidth: 20.0,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '${_nutriPoints.toInt()}',
                    style: TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                      color: progressColor,
                    ),
                  ),
                  SizedBox(height: 5), // Add a small space between the number and text
                  RichText(
                    text: TextSpan(
                      style: TextStyle(
                        fontSize: 16,
                        color: Colors.black,
                        fontFamily: 'Popins',
                      ),
                      children: [
                        TextSpan(
                          text: 'NUTRI',
                          style: TextStyle(
                            fontWeight: FontWeight.normal,
                            letterSpacing: 3,
                          ),
                        ),
                        TextSpan(
                          text: 'POINTS',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            letterSpacing: 3,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              // This empty container pushes the content up
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(height: 20),
              ),
            ],
          ),
  );
}
}

Answer 1

查看您的代码，我注意到黑匣子可能来自堆栈底部的空容器。您有一个带有容器的对齐小部件，该容器具有高度但没有其他样式属性，它似乎显示为黑框。

尝试用 SizedBox 替换 Container，因为你只需要创建空间

Align(
   alignment: Alignment.bottomCenter,
   child: SizedBox(height: 20), // Changed Container to SizedBox
)

或者，您可以完全删除“对齐”小部件，并在需要间距时向列添加填充

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      '${_nutriPoints.toInt()}',
      // ... existing styling ...
    ),
    SizedBox(height: 5),
    RichText(
      // ... existing RichText ...
    ),
    SizedBox(height: 20), // Added spacing here
  ],
),