Question

由于某些原因，按钮文本在释放模式下显示为灰色，而在调试模式下显示为正常。这是在调试模式下的外观示例：

这是释放模式下的示例：

该按钮的代码如下：

                          
Expanded(
  child: Container(
    padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: ScreenUtil().setWidth(263),
              height: ScreenUtil().setHeight(69),
              padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.success,
                borderRadius: BorderRadius.all(Radius.circular(12.0))),
              child: FlatButton(
                onPressed: () {
                  // some actions
                },
                child: Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget> [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text("Выбрать", style: TextStyle(color: Theme.of(context).colorScheme.primaryLight, fontSize: ScreenUtil().setSp(16)), textAlign: TextAlign.center),
                          Container(
                            padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(20), 0, 0, 0),
                            child: SvgPicture.asset("assets/icons/forward.svg", height: ScreenUtil().setHeight(20), width: ScreenUtil().setWidth(20))
                          ),
                        ]
                      )
                    ],
                  )
                )
              )
            )
          ]
        )
      ]
    )
  )
)

如您所见，我正在使用ScreenUtil来管理灵活的布局。怀疑是由于某种原因它无法正常工作。

有人可以解释这里发生的情况吗，为什么在没有溢出报告的情况下，完美可渲染的应用程序在释放模式下如此表现？而且，更重要的是，如何解决它（最好是不更改字体大小，因为它已经足够小了）？

Answer 1

我调整了代码，现在看起来像这样：

Expanded(
  child: Container(
    padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
      FlatButton(
        onPressed: () {
          // some actions
        },
        child: Container(
          width: ScreenUtil().setWidth(263),
          height: ScreenUtil().setHeight(69),
          padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.success,
            borderRadius: BorderRadius.all(Radius.circular(12.0))),
          child:
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Выбрать", style: TextStyle(color: Theme.of(context).colorScheme.primaryLight, fontSize: ScreenUtil().setSp(16)), textAlign: TextAlign.center),
                Container(
                  padding: EdgeInsets.fromLTRB(ScreenUtil().setWidth(20), 0, 0, 0),
                  child: Icon(Icons.arrow_forward, size: 20)
                ),
              ]
            )
          )
        )
      ]
    )
  )
)

只要我必须构建发行版本以尝试在可重现问题的电话上进行每次代码更改（模拟器上的一切都很好，那里没有灰色矩形），调整过程就很繁琐。首先，我找到了可以在不显示不需要的灰色矩形的情况下工作的最小代码，然后从那里逐步建立代码。结果是工作按钮没有不必要的副作用。老实说，现在当我能够比较错误的和可行的解决方案时，我仍然不知道以前的代码示例到底出了什么问题。 FlatButton包装器的位置无关紧要，如果将灰色矩形向上移动到文档树中，则它会更大。我猜想摆脱多余的Row声明最终会使它起作用。

在Flutter应用程序的释放模式下，文本变为灰色

1 个答案: