我做了一个网站在flutter，然后我得到了一个建设。但版本在web调试和建设不一样的工作。
只有背景gif出现在页面上，它也是透明的。
我在xampp和各种主机中运行该网站进行测试，我更改了浏览器，但仍然得到相同的错误。
我重建了那个项目。我用了"扑动医生"，"扑动清洁"，但没有效果。
Web控制台中似乎没有错误。
Web调试结果：
enter image description here
-——-
构建结果
enter image description here
- 当我为android构建这个项目时，它运行良好，并给出了相同的结果。*
- 我也构建了flutter for web的经典代码，它产生了相同的结果，没有任何问题。*
- --------------编辑1-------------------
我添加了appbar到我的代码中，我看到它是在build中添加的，没有任何问题。enter image description here
然后在我的代码中，我删除了scaffold的body属性所附带的stack小部件，并将所有容器涂成红色。2我看到，不是整个页面而是各行都变灰了。3（注意：背景gif在堆栈中，我也删除了它。）
enter image description here
- ----------------------编辑3-----------
我在SO中发现了另一个类似的问题。
我的天! - ----------------------编辑3-----------
我注意到一件重要的事。
我发现了这个问题，但我不明白为什么会发生，以及如何解决它。
如果堆栈中的扩展和fittedbox小部件被移除，问题就会消失。
第1页（问题状态）：
return Stack(
children: [
Positioned.fill(
child: Container(
child: Image.asset(
"ImageAssets/mobile.gif",
fit: BoxFit.fill,
),
),
),
Center(
child: Positioned(
top: 0,
left: 0,
child: Container(
width: 1200,
height: 3999,
child: Row(
children: [
Expanded(
flex: 1,
child: SingleChildScrollView(
controller: _scrollController,
child: Container(
width: 600,
height: 1000,
color: Colors.brown.withOpacity(0.2),
child: Column(
children: [
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
],
),
),
),
),
Expanded(
flex: 3,
child: SingleChildScrollView(
child: Container(
height: 3999,
child: Column(
children: [
TextBox(leftMarginValue: widthSize/4,topMarginValue: heightSize/20,insideText: "Testibulum arcu elit, interdum vel porttitor eu.",context: context),
TextBox(leftMarginValue: widthSize/80,topMarginValue: heightSize/20,rightMarginValue: widthSize/4-widthSize/80,insideText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",context: context),
],
),
),
),
),
],
),
),
),
),
],
);第2页（问题状态）：
child: Stack(
children: [
Container(
height: heightSize / 8,
width: widthSize / 5,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(22),
color: Colors.grey,
border: Border.all(color: Colors.white, width: 2),
),
child: Center(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: widthSize / 80,
end: widthSize / 80,
top: heightSize / 80,
bottom: heightSize / 80),
child: Expanded(
child: FittedBox(
child: Text(
softWrap: false,
overflow: TextOverflow.ellipsis,
insideText,
style: TextStyle(
fontSize: widthSize / 50, color: Colors.white),
),
),
),
),
),
),
],
),如果我构建上面的代码，屏幕完全是灰色的。
第2页（从堆栈中删除扩展和安装）：
return Stack(
children: [
Container(
child: Image.asset(
"ImageAssets/mobile.gif",
fit: BoxFit.fill,
),
),
Center(
child: Container(
width: 1200,
height: 3999,
child: Row(
children: [
SingleChildScrollView(
controller: _scrollController,
child: Container(
width: 600,
height: 1000,
color: Colors.brown.withOpacity(0.2),
child: Column(
children: [
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
],
),
),
),
SingleChildScrollView(
child: Container(
height: 3999,
child: Column(
children: [
TextBox(leftMarginValue: widthSize/4,topMarginValue: heightSize/20,insideText: "Testibulum arcu elit, interdum vel porttitor eu.",context: context),
TextBox(leftMarginValue: widthSize/80,topMarginValue: heightSize/20,rightMarginValue: widthSize/4-widthSize/80,insideText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",context: context),
],
),
),
),
],
),
),
),
],
);第2页（从堆栈中删除扩展和安装）：
child: Stack(
children: [
Container(
height: heightSize / 8,
width: widthSize / 5,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(22),
color: Colors.grey,
border: Border.all(color: Colors.white, width: 2),
),
child: Center(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: widthSize / 80,
end: widthSize / 80,
top: heightSize / 80,
bottom: heightSize / 80),
child: Text(
softWrap: false,
overflow: TextOverflow.ellipsis,
insideText,
style: TextStyle(
fontSize: widthSize / 50, color: Colors.white),
),
),
),
),
],
),如果我构建了上面的代码，灰色就会消失。
以下是新代码的构建示例
enter image description here
1条答案
按热度按时间zbdgwd5y1#
是的，我修复了错误。
变灰的原因是我在堆栈结构中使用了不正确的布局小部件。这里是最令人困惑的部分。当你进行调试时，这些错误可以修复，但当你进行构建时，它会导致变灰。
有3个步骤可以消除此代码的灰色。
之前：enter image description here
1-）
在下面的代码中，有必要删除"Positioned.fill"小部件。
当您删除此小工具时，您将删除覆盖屏幕的灰色。
之后：enter image description here
之前：enter image description here
2-）要解决侧边栏是灰色的问题，需要删除包裹文本的扩展
之后：enter image description here
之前：enter image description here
3-)AnimetedTextKit中展开的小部件需要移除，以解决页面内容中的灰色问题。
之后：enter image description here