我有一个带有bottomNavigationBar,appBar等的Flutter应用程序,我也需要进行导航。是否可以在Web开发人员中执行类似布局的操作,而不是在每个页面上都使用Scaffold?“因为我不想在每个屏幕上绘制底部导航。
这种方式不起作用
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('f'),
),
bottomNavigationBar: BottomBar(),
body: Com(),
),
);
class Com extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text('go'),
onPressed: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Cam()),
)
},
);
}
}
class Cam extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Text('Cam');
}
}
它以一种很好的方式呈现了一个按钮,但是当我使用导航后,布局崩溃,并且我只在黑屏上看到文本
解决此问题的方法是,仅使用小部件树中高处的一个脚手架,只需更改下面的小部件,特别是在Scaffold body:参数中。
例如,在下面的代码中,MyApp始终相同(它是无状态的),并且始终显示相同的支架...但是,MyHomePage是有状态的,并显示在支架主体中。
因此,如果我将所有更改都保留在MyHomePage小部件及其以下,则不必在每个屏幕上都重新创建底部导航栏...只需重新创建一个。:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("your title here"),
body: Center(
child: MyHomePage(),
bottomNavigationBar: BottomNavigationBar(your navbar here)
), // Scaffold
), //Material App
} //build method
} //stateless widget
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
. . .