Expanded 其作用是填充剩余部分的空间
如: 该例子是在一个container中,左右各一个button,title填充中间部分空间
@override
Widget build(BuildContext context) {
return Container(
height: 100.0, // 单位是逻辑上的像素(并非真实的像素,类似于浏览器中的像素)
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(color: Colors.blue[500]),
// Row 是水平方向的线性布局(linear layout)
child: Row(
//列表项的类型是 <Widget>
children: <Widget>[
IconButton(
icon: const Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: _incrementCounter, // null 会禁用 button
),
// Expanded expands its child to fill the available space.
Expanded(
child:Center(
Text('life is forking movie')
),
),
const IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
Scaffold,AppBar 其作用是页面主要布局,是一套相对丝滑且成熟的布局,无需自己封装,头部兼容也有呢
Widget build(BuildContext context) {
//Scaffold是Material中主要的布局组件.
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: new Text('Example title'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
//body占屏幕的大部分
body: new Center(
child: new Text('Hello, world!'),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
child: new Icon(Icons.add),
onPressed: null,
),
);
}
Scaffold的drawer, MediaQuery.removePadding(),Stack(),NotificationListener<ScrollNotification>(),ListView(),Opacity()
代码较多,请移步-->//www.greatytc.com/p/2e0bf4dd7e94
ExpansionTile
请移步--> //www.greatytc.com/p/428e6aea59a7