Scaffold
对于MaterialApp
,见 24: MaterialApp
基本参数
return Scaffold(
backgroundColor: Colors.white, // 背景颜色
resizeToAvoidBottomInset: false, // 见文末常见问题
body: Home(), // 页面入口,这里是一个Widget
app: AppBar(), // 顶部栏,见组件-AppBar
bottomNavigationBar: BottomNavigationBar(), // 底部导航栏,见组件-BottomNavigationBar
floatingActionButton: FloatingActionButton(), // 浮动按钮,见组件-FloatingActionButton
)
组件
AppBar
顶部栏,一般显示当前页面的标题:
String title="主页"
return Scaffold(
appBar: AppBar(
title: Text(title), // 设置appBar文字
leading: Icon(Icons.home), // AppBar左侧内容
action: Icon(Icons.add), // AppBar右侧内容
flexibleSpace: SizedBox(), // 灵活区域,可以添加图片修改等
backgroundColor: Colors.white, // 背景颜色
foregroundColor: Colors.blue, // 前景色
),
);
BottomNavigationBar
底部导航栏,导航到不同的页面。注意,BottomNavigationBar
要求数量不得小于2
int curIndex=0;
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
currentIndex: curIndex, // 当前的索引值
onTap: (index){}, // 点击item操作(一般为setState currentIndex)
items: [], // 具体的item
backgroundColor: Colors.white, // 背景颜色
selectedItemColor: Colors.blue, // 选中的颜色
unselectedItemColor: Colors.grey, // 没有选中的颜色
),
);
items
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), // 图标是什么
label: "主页", //文本显示什么
),
// ... (至少写两个BottomNavigationBarItem)
]
FloatingActionButton
(默认情况下)悬浮在右侧的按钮,默认为圆形
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){}, // 按下后的操作
child: Icon(Icons.add), // 图标是什么
foregroundColor: Colors.blue, // 前景色
backgroundColor: Colors.white, // 背景颜色
),
);
一些问题
对于BottomNavigationBar
,会出现当使用软键盘的时候被软键盘托起,这时候需要这样修改:
return Scaffold(
// 添加下面这行
resizeToAvoidBottomInset: false,
// ...
);