介绍
Flutter Widget采用现代响应式框架构建,中心思想是用widget构建你的UI。Widget描述了他们的视图在给定其当前配置和状态时看起来像什么。当widget的状态发生变化时,widget会重新构建UI,Flutter会对比前后变化的不同,以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。
基础Widget
Flutter有一套丰富的基础widget。
- Text:该widget可以创建一个带格式的文本
- Row、Column:这些具有弹性空间的布局类Widget可以在水平、垂直方向上创建灵活的布局
- Stack:取代线性布局,Stack允许子widget堆叠,可以使用Positioned来定位他们相对于Stack的上下左右四条边的位置
- Container:可以创建矩形视觉元素,container可以装饰为一个BoxDecoration,如background、一个边框或者一个阴影。Container也可以具有边距、填充和应用于其大小的约束,另外,Container可以使用矩阵在三维空间中对其进行变换
下面是一个简单的代码示例
void main() => runApp(new MaterialApp(title: 'My App', home: new MyScaffold()));
class MyAppBar extends StatelessWidget {
final Widget title;
@override
Widget build(BuildContext context) {
return new Container(
height: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(color: Colors.blue[500]),
child: new Row(
children: <Widget>[
new IconButton(
icon: new Icon(Icons.menu),
tooltip: "Navigation menu",
onPressed: null),
new Expanded(child: title),
new IconButton(
icon: new Icon(Icons.search), tooltip: "Search", onPressed: null)
],
),
);
}
MyAppBar({