Flutter入门-04 Scaffold
import ‘package:flutter/material.dart‘;
void main()=>runApp(App());
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("HELLO"),
)
),
);
}
}
Scaffold(脚手架)的主要属性:
this.appBar,//设置应用栏,显示在脚手架顶部
this.body,//设置脚手架内容区域控件
this.floatingActionButton,//设置显示在上层区域的按钮,默认位置位于右下角
this.floatingActionButtonLocation,//设置floatingActionButton的位置
this.floatingActionButtonAnimator,//floatingActionButtonAnimator 动画 动画,但是设置了没有效果?
this.persistentFooterButtons,//一组显示在脚手架底部的按钮(在bottomNavigationBar底部导航栏的上面)
this.drawer,//设置左边侧边栏
this.endDrawer,//设置右边侧边栏
this.bottomNavigationBar,//设置脚手架 底部导航栏
this.bottomSheet,//底部抽屉栏
this.backgroundColor,//设置脚手架内容区域的颜色
this.resizeToAvoidBottomPadding = true,// 控制界面内容 body 是否重新布局来避免底部被覆盖,比如当键盘显示的时候,重新布局避免被键盘盖住内容。
this.primary = true,//脚手架是否显示在最低部Scaffold基本属性使用
import ‘package:flutter/material.dart‘;
void main()=>runApp(App());
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.yellowAccent,
appBar: AppBar(
title: Text("HELLO")
),
body: Text(
"Hello",
style: TextStyle(
fontSize: 100.0,
color: Colors.redAccent,
),
),
floatingActionButton: FloatingActionButton(
child: Text("Button"),
backgroundColor: Colors.red,
),
drawer: Container(
color:Colors.white,
padding:EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("this is drawer"),
],
)
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed, //当导航栏的图标大于3个时,需要此方法
fixedColor: Colors.black, //激活(点击时)颜色为黑色
items: [
BottomNavigationBarItem(
icon: Icon(Icons.explore),
title: Text("Explore"),
),
BottomNavigationBarItem(
icon: Icon(Icons.history),
title: Text("History"),
),
],
),
),
);
}
}
相关推荐
csdnYF 2020-11-15
SemiraChen 2020-10-10
YejiaSun 2020-09-27
csdnYF 2020-09-20
FrankAbagnale 2020-09-15
wmd看海 2020-07-27
szintu 2020-07-05
chaoxiao 2020-07-04
wmd看海 2020-06-27
龙衣 2020-06-26
龙衣 2020-06-09
龙衣 2020-06-08
wmd看海 2020-06-04
Samlss 2020-06-04
wmd看海 2020-06-04
csdnYF 2020-05-30
androidgjw 2020-05-28
wmd看海 2020-05-28
wmd看海 2020-05-19