flutter界面布局
时间: 2023-09-05 08:07:45 浏览: 49
Flutter 的界面布局采用的是 Widget 树来描述页面。Flutter 中有许多内置的 Widget,例如:Container、Row、Column、Stack 等,这些 Widget 可以用来构建各种复杂的界面布局。
下面是一个简单的例子,展示如何使用 Row 和 Column 来实现页面布局:
```dart
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, World!',
style: TextStyle(fontSize: 24.0),
),
SizedBox(height: 24.0),
RaisedButton(
onPressed: () {
// TODO: Add button logic here
},
child: Text('Press Me'),
),
],
),
),
);
}
}
```
在这个例子中,我们使用了 Scaffold Widget 来创建一个基础的页面框架。在 body 中,我们使用了 Center Widget 来把 Column Widget 居中显示。在 Column Widget 中,我们添加了两个子 Widget:一个是 Text Widget,用来显示文本;另一个是 RaisedButton Widget,用来创建一个按钮。
我们还使用了 mainAxisAlignment 属性来指定子 Widget 的垂直对齐方式。在这个例子中,我们将子 Widget 居中对齐。我们也可以使用 crossAxisAlignment 属性来指定子 Widget 的水平对齐方式。
当然,这只是一个简单的例子。在实际开发中,我们会使用更多的 Widget 和属性来创建不同的界面布局。