我正在创建一个多页面的应用程序。当我在其中使用导航时，出现黑屏。
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可能存在问题，但我尚无法修复。谁能告诉我问题出在哪里以及如何解决？
根据注释中的要求更新了完整代码。
答案 0 :(得分：7)
因此在NewTrip（）中删除MaterialApp，因为它是从父级继承的。只需返回脚手架。
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
答案 1 :(得分：4)
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
删除MaterialApp（）
答案 2 :(得分：3)
好吧，因此，在互联网上进行了一些研究之后，我发现造成问题的原因是FloatingActionButton。
我用MaterialButton替换了FloatingActionButton，这解决了我的问题。
答案 3 :(得分：3)
请从您的代码中检查完整的代码编辑。实际上，您正在使用两个FloatingActionButton。因此，您需要使用两个名称不同的heroTag。我已经添加了代码。 NewTrip类没有问题。
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,
),
],
),
),
],
),
),
],
),
);
}
}
NewTrip类
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
答案 4 :(得分：1)
使用 ThemeData 以及参数 scaffoldBackgroundColor。
例如：
ThemeData (
scaffoldBackgroundColor: Colors.black,
)
答案 5 :(得分：1)
就我而言，它是由以下原因引起的：
// to set portait screen orientation
SystemChrome.setPreferredOrientation([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.
我在页面小部件呈现时声明的。删除它解决了我的黑屏问题。
答案 6 :(得分：1)
FloatingActionButton 是问题所在，因此如果您真的想使用浮动操作按钮，您应该将它们中的每一个添加到唯一的 heroTag 中。现在您可以毫无问题地使用 FloatingActionButton。切勿在同一页面上不使用 HeroTag 的情况下使用多个浮动操作按钮。
答案 7 :(得分：1)
我相信整个 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'),
);
}
}
答案 8 :(得分：0)
问题是您在另一个materialApp中使用了materialApp
导航器仅更改页面，而在NewTrip（）中我们不需要单独的materailApp
所以NewTrip应该如下
class NewTrip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}