flutter - 导航栏颤振应用程序不显示屏幕上的任何位置
问题描述
我正在尝试在我的移动应用程序中打印导航栏。main.dart 的代码: navbar.dart 包的导入系统说未使用。导航栏完全没有显示。有谁知道如何解决这一问题?天气应用程序本身确实有效。但导航栏不打印。PLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholder
import 'package:weerappflutter/data_service.dart';
import 'package:flutter/material.dart';
import 'package:weerappflutter/models.dart';
import 'package:weerappflutter/navbar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _cityTextController = TextEditingController();
final _dataService = DataService();
WeatherResponse? _response;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_response != null)
Column(
children: [
Image.network(_response!.iconUrl),
Text(
'${_response!.tempInfo.temperature}°',
style: TextStyle(fontSize: 40),
),
Text(_response!.weatherInfo.description)
],
),
Padding(
padding: EdgeInsets.symmetric(vertical: 50),
child: SizedBox(
width: 150,
child: TextField(
controller: _cityTextController,
decoration: InputDecoration(labelText: 'Voer een stad in:'),
textAlign: TextAlign.center),
),
),
ElevatedButton(onPressed: _search, child: Text('Toon temparatuur'))
],
),
),
));
}
void _search() async {
final response = await _dataService.getWeather(_cityTextController.text);
setState(() => _response = response);
}
}
代码 navbar.dart
import 'package:flutter/material.dart';
class NavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
// Remove padding
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
accountName: Text('WeerBeving'),
accountEmail: Text('WeerBeving.com'),
currentAccountPicture: CircleAvatar(
child: ClipOval(
child: Image.network(
'https://oflutter.com/wp-content/uploads/2021/02/girl-profile.png',
fit: BoxFit.cover,
width: 90,
height: 90,
),
),
),
decoration: BoxDecoration(
color: Colors.blue,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
),
),
ListTile(
leading: Icon(Icons.favorite),
title: Text('Weer'),
onTap: () => null,
),
ListTile(
leading: Icon(Icons.person),
title: Text('Aardbevingen Nederland'),
onTap: () => null,
),
ListTile(
leading: Icon(Icons.share),
title: Text('Aardbevingen wereldwijd'),
onTap: () => null,
),
Divider(),
ListTile(
title: Text('Exit'),
leading: Icon(Icons.exit_to_app),
onTap: () => null,
),
],
),
);
}
}
解决方案
您已经声明了 NavBar 小部件,但您忘记将其放置到小部件树中。为此,请使用 Scaffold ... Scaffold 的抽屉字段 (drawer: NavBar(), body: ... )
推荐阅读
- matplotlib - X, Y 中的纬度经度图
- google-cloud-dataflow - Dataflow/Apache Beam:如何从@FinishBundle 访问状态?
- entity-framework-6 - 实体框架代码优先迁移:使用 down() 方法恢复迁移不起作用
- c++ - GCC 警告形成偏移 [X1, X2] 超出范围 [0, X3]
- android - 如何使用 Play Install Referrer Library 将推荐人从 Playstore 获取到应用程序?
- ibeacon-android - 可能会延迟检测信标
- audio - 带有前台服务的音频播放器,适用于 iOS+ Android
- java - Elasticsearch:无法解析映射 [_doc]
- python - 如何从 Flask 在 HTML 页面中添加数据
- sql - PL SQL 读取 blob 字段