flutter实现一个首页框架
时间: 2024-02-01 17:03:13 浏览: 111
Flutter 实现一个首页框架可以采用 `Scaffold` 组件,它提供了一个基本的 Material Design 风格的页面布局框架。以下是一个简单的示例代码:
```dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text('Welcome to Home Page'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.person),
title: Text('Profile'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {},
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notifications',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}
```
这个示例代码创建了一个 `Scaffold`,它包含了一个 `AppBar`,一个居中显示的文本、一个抽屉式菜单和一个底部导航栏。你可以根据需要修改它们的样式和布局。
阅读全文