Flutter(Scaffold全貌)
程序员文章站
2022-05-29 20:24:58
...
1.大体如此,如果有新学到的再进行补充:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', theme: ThemeData(), home: study());
}
}
class study extends StatefulWidget {
@override
_studyState createState() => _studyState();
}
class _studyState extends State<study> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("页面标题"),
),
body:Container(
color: Colors.orange,
),
bottomSheet: Container(
height: 80,
width: double.infinity,
color: Colors.red,
),
persistentFooterButtons: <Widget>[
FlatButton(
color: Colors.pink,
child: Text("按钮1",),
),
Text("文本内容"),
],
bottomNavigationBar:BottomNavigationBar(
items: [
BottomNavigationBarItem(title:Text("我的"),icon: Icon(Icons.person)),
BottomNavigationBarItem(title:Text("我的"),icon: Icon(Icons.person)),
],
),
drawer: Drawer(
child: Container(
child: Text(
"抽屉菜单"
),
),
),//侧滑菜单
);
}
}
运行效果:
2.appbar:
3. bottomappbar:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button'),
),
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(height: 50.0,),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}