import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // 去掉debug标志
theme: ThemeData(
useMaterial3: true, //启用Material3的UI风格
),
home: Scaffold(
backgroundColor: Colors.deepOrange,
//设置正文部分背景
appBar: AppBar(
backgroundColor: Colors.deepOrange, //设置标题栏部分背景
title: const Text("这是标题"),
),
body: GestureDetector(
//通过GestureDetector给text添加单击事件
onTap: () {
print('Text clicked!'); // 在控制台输出一个消息
},
child: const Text("321"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('Button clicked!');
},
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
drawer: Drawer(
child: ListView(
children: [
UserAccountsDrawerHeader(
accountName: Text('John Doe'),
accountEmail: Text('john.doe@example.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://randomuser.me/api/portraits/men/1.jpg'),
),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
ListTile(
leading: Icon(Icons.help),
title: Text('Help'),
),
],
),
),
),
);
}
}
在这个示例中,我们使用了 Scaffold 组件来构建页面。我们在 appBar 属性中设置了一个顶部的 AppBar,在 body 属性中设置了一个居中显示的 Text 组件,以及在 floatingActionButton 属性中设置了一个浮动按钮。我们还在 bottomNavigationBar 属性中设置了一个底部导航栏,以及在 drawer 属性中设置了一个侧边栏。
你可以根据自己的需要添加和修改 Scaffold 中的各个属性,来构建自己需要的应用程序页面。