导航时如何修复黑屏？
How to fix black screen in flutter while Navigating?
我正在 Flutter 上创建一个 multi-paged 应用程序。当我在其中使用导航时，出现黑屏。
import 'package:flutter/material.dart';
void main() => runApp(MyHomePage());
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
@override
_Page0State createState() => _Page0State();
}
class _Page0State extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: [
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: [
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: [
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: [
//greeting text
Row(
children: [
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => NewTrip()),);
},
),``
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
而NewTrip小部件如下
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text('NEW TRIP'),
),
);
}
}
主页加载正常，但当我点击新行程按钮时，它显示黑屏。 MaterialApp 或 Scaffold 可能存在问题，但我无法修复它。谁能告诉我问题出在哪里以及如何解决？
已根据评论中的要求更新了完整代码。
好的，在互联网上进行一些研究后，我发现是 FloatingActionButton 引起了问题。
我用 MaterialButton 替换了 FloatingActionButton，这解决了我的问题。
所以在 NewTrip() 中删除 MaterialApp 因为它继承自父级。就 return Scaffold.
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
删除 MaterialApp()
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
请检查您代码中的完整代码编辑。实际上你使用了两个 FloatingActionButton。所以你需要使用两个不同名称的 heroTag。我已经在代码中添加了。 NewTrip class.
没问题
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
@override
_Page0State createState() => _Page0State();
}
class _Page0State extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: [
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: [
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: [
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: [
//greeting text
Row(
children: [
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn",
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewTrip()),
);
},
),
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn1",
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
新旅class
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
问题是您使用的是 materialApp inside another materialApp
Navigator 只是更改页面，我们不需要在 NewTrip() 中单独使用 materialApp。
所以NewTrip应该如下
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: Colors.white, //here
visualDensity: VisualDensity.adaptivePlatformDensity,
),
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
使用ThemeData, along with the parameter scaffoldBackgroundColor.
例如：
ThemeData (
scaffoldBackgroundColor: Colors.black,
)
就我而言，它是由以下原因引起的：
// to set portait screen orientation
SystemChrome.setPreferredOrientation([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.
我在页面小部件呈现时声明的。删除它解决了我的黑屏问题。
FloatingActionButton 是个问题，所以如果你真的想使用浮动操作按钮，你应该将它们中的每一个都添加到唯一的 heroTag。现在您可以毫无问题地使用 FloatingActionButton 了。切勿在同一页面上不使用 HeroTag 而使用多个浮动操作按钮。
我相信整个Flutter应用中只能有一个MaterialApp Widget，因为MaterialApp Widget很可能是Flutter的主要或核心组件。因此，当您尝试导航到新屏幕时，请尝试返回 Scaffold Widget 而不是 MaterialApp Widget。
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
只需将脚手架放在下一页即可。
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
),
);
}
}
删除 material 应用程序和 return 脚手架它肯定会正常工作
否则，如果您对浮动按钮有疑问，请添加
heroTag: "btn1",
heroTag: "btn2",
在一个子树中有多个共享相同标签的英雄
之前:
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Text('NEW TRIP'),
);
}
}
因此，为了解决这个问题，我们用 scaffold 小部件
包装新的导航小部件
之后的解决方案：
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Material(
child: Text('NEW TRIP'),
),
);
}
}
如果您导航的页面不包含 Scaffold，则该页面将为黑色，因为 Scaffold 实现了基本的 material 设计视觉布局结构，因此应用 Scaffold 和父小部件material 应用程序。
您遇到的问题是因为您正在导航的小部件没有任何 material 小部件。
只需将导航屏幕的 return 小部件包装为 Scaffold 作为父级。
我正在 Flutter 上创建一个 multi-paged 应用程序。当我在其中使用导航时，出现黑屏。
import 'package:flutter/material.dart';
void main() => runApp(MyHomePage());
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
@override
_Page0State createState() => _Page0State();
}
class _Page0State extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: [
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: [
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: [
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: [
//greeting text
Row(
children: [
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => NewTrip()),);
},
),``
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
而NewTrip小部件如下
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text('NEW TRIP'),
),
);
}
}
主页加载正常，但当我点击新行程按钮时，它显示黑屏。 MaterialApp 或 Scaffold 可能存在问题，但我无法修复它。谁能告诉我问题出在哪里以及如何解决？
已根据评论中的要求更新了完整代码。
好的，在互联网上进行一些研究后，我发现是 FloatingActionButton 引起了问题。
我用 MaterialButton 替换了 FloatingActionButton，这解决了我的问题。
所以在 NewTrip() 中删除 MaterialApp 因为它继承自父级。就 return Scaffold.
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
删除 MaterialApp()
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
请检查您代码中的完整代码编辑。实际上你使用了两个 FloatingActionButton。所以你需要使用两个不同名称的 heroTag。我已经在代码中添加了。 NewTrip class.
没问题import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
@override
_Page0State createState() => _Page0State();
}
class _Page0State extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: [
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: [
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: [
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: [
//greeting text
Row(
children: [
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn",
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewTrip()),
);
},
),
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn1",
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
新旅class
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
问题是您使用的是 materialApp inside another materialApp
Navigator 只是更改页面，我们不需要在 NewTrip() 中单独使用 materialApp。
所以NewTrip应该如下
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: Colors.white, //here
visualDensity: VisualDensity.adaptivePlatformDensity,
),
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
使用ThemeData, along with the parameter scaffoldBackgroundColor.
例如：
ThemeData (
scaffoldBackgroundColor: Colors.black,
)
就我而言，它是由以下原因引起的：
// to set portait screen orientation
SystemChrome.setPreferredOrientation([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.
我在页面小部件呈现时声明的。删除它解决了我的黑屏问题。
FloatingActionButton 是个问题，所以如果你真的想使用浮动操作按钮，你应该将它们中的每一个都添加到唯一的 heroTag。现在您可以毫无问题地使用 FloatingActionButton 了。切勿在同一页面上不使用 HeroTag 而使用多个浮动操作按钮。
我相信整个Flutter应用中只能有一个MaterialApp Widget，因为MaterialApp Widget很可能是Flutter的主要或核心组件。因此，当您尝试导航到新屏幕时，请尝试返回 Scaffold Widget 而不是 MaterialApp Widget。
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
只需将脚手架放在下一页即可。
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
),
);
}
}
删除 material 应用程序和 return 脚手架它肯定会正常工作
否则，如果您对浮动按钮有疑问，请添加
heroTag: "btn1",
heroTag: "btn2",
在一个子树中有多个共享相同标签的英雄
之前:
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Text('NEW TRIP'),
);
}
}
因此，为了解决这个问题，我们用 scaffold 小部件
之后的解决方案：
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Material(
child: Text('NEW TRIP'),
),
);
}
}
如果您导航的页面不包含 Scaffold，则该页面将为黑色，因为 Scaffold 实现了基本的 material 设计视觉布局结构，因此应用 Scaffold 和父小部件material 应用程序。
您遇到的问题是因为您正在导航的小部件没有任何 material 小部件。
只需将导航屏幕的 return 小部件包装为 Scaffold 作为父级。