问题描述
我目前正在构建一个 Flutter 应用程序，用于推荐该地区周围的餐馆.然而，我让自己陷入了混乱.
I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle.
为了组织和整洁，我希望我的应用程序将 AppBar 的代码与每个屏幕的代码分开.因此，我构建了 KainAppBar.dart 作为 AppBar 代码.它显示在这里:
I want my app to have the code for the AppBar separate from the code for each screen for the sake of organization and cleanliness. So, I built KainAppBar.dart as the AppBar code. It is shown here:
import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
GoogleSignIn _googleSignIn = GoogleSignIn(
signInOption: SignInOption.standard,
);
class KainAppBar extends StatelessWidget {
final String title;
KainAppBar(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new GradientAppBar(
centerTitle: true,
title: new Text('Kain',
style: TextStyle(
fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
)),
backgroundColorStart: Colors.red[400],
backgroundColorEnd: Colors.red[900],
),
drawer: new Drawer(
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Colors.red[800],
),
accountName: new Text('Guest'),
accountEmail: new Text('[email protected]'),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
),
),
new ListTile(
title: new Text('Restaurants'),
leading: Icon(Icons.restaurant_menu),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/restaurant_screen');
},
),
new ListTile(
title: new Text('Nearby'),
leading: Icon(Icons.near_me),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/nearby_screen');
},
),
new ListTile(
title: new Text('Request Restaurant'),
leading: Icon(Icons.library_add),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/request_screen');
},
),
new ListTile(
title: new Text('Settings'),
leading: Icon(Icons.settings),
onTap: (){},
),
new ListTile(
title: new Text('About'),
leading: Icon(Icons.info_outline),
onTap: (){},
),
new ListTile(
title: new Text('Logout'),
leading: Icon(Icons.power_settings_new),
onTap: (){
_googleSignIn.disconnect();
FirebaseAuth.instance.signOut().then((value) {
Navigator.of(context).pushReplacementNamed('/login');
}).catchError((e) {
print(e);
});
},
),
],
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
)
],
),
);
}
}
对于我的一些屏幕，我可以毫无问题地声明它.这是 home_screen.dart 的代码:
For some of my screens, I can declare it with no problem. Here is the code for home_screen.dart:
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen>{
@override
noSuchMethod(Invocation invocation) {
return super.noSuchMethod(invocation);
}
@override
Widget build(BuildContext context){
return new KainAppBar("Kain");
}
}
但是，对于我的restaurant_screen.dart，我遇到了问题.对于上下文，restaurant_screen.dart 的作用是通过带有三个选项(选项卡)的 TabBar 显示应用中包含的餐厅:餐厅列表、美食列表和历史记录.也就是说除了AppBar，里面还需要一个TabBar.但是我不能把这个 TabBar 放在 KainAppBar.dart 里面，因为我只需要它显示在 restaurant_screen.dart 里面.
However, for my restaurant_screen.dart, I've encountered a problem. For context, what restaurant_screen.dart does is it shows the restaurants included in the app through a TabBar with three options(tabs): Restaurant List, Cuisine List, and History. Which means that apart from the AppBar, it also needs to have a TabBar inside. But I cannot put this TabBar inside KainAppBar.dart because I only need it to show inside restaurant_screen.dart.
这是我在 restaurant_screen.dart 中的 Widget 代码:
Here is my code for the Widget inside restaurant_screen.dart:
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
GradientAppBar(
title: KainAppBar("Kain"),
bottom: new TabBar(
labelColor: Colors.white,
controller: tController,
tabs: <Widget>[
new Tab(text: 'List'),
new Tab(text: 'Cuisine'),
new Tab(text: 'Favorites'),
],
),
),
TabBarView(
controller: tController,
children: <Widget>[
new firstpage.RestaurantList(),
new secondpage.CuisineList(),
new thirdpage.RestaurantFavorites(),
],
),
],
);
}
运行代码只显示黑屏.有什么解决方法吗?
Running the code just shows a black screen. Is there any workaround for this?
推荐答案
这是另一种解决方案.通过这样做，您可以根据需要自定义此应用栏.这样，如果您继续使用该样式，则不必在每个页面上重新创建它.您只需创建一次即可在任何小部件中调用它.
This is another way of going about it. By doing this you can customize this appbar to the way you want. That way, if you continue with that style, you don't have to recreate it on every page. You create it once and call on it within any widget.
班级
import 'package:flutter/material.dart';
class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
final Color backgroundColor = Colors.red;
final Text title;
final AppBar appBar;
final List<Widget> widgets;
/// you can add more fields that meet your needs
const BaseAppBar({Key key, this.title, this.appBar, this.widgets})
: super(key: key);
@override
Widget build(BuildContext context) {
return AppBar(
title: title,
backgroundColor: backgroundColor,
actions: widgets,
);
}
@override
Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}
实施在所需页面内
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: BaseAppBar(
title: Text('title'),
appBar: AppBar(),
widgets: <Widget>[Icon(Icons.more_vert)],
),
body: Container());
}
这篇关于如何在仍然显示小部件的同时将我的 AppBar 放在 Flutter 中的单独文件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！