flutter 布局一个带顶部和底部组件的页面
时间: 2024-02-23 12:59:18 浏览: 80
Flutter 可以使用多种方式来布局一个带顶部和底部组件的页面,下面是其中一种方法:
```dart
import 'package:flutter/material.dart';
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Column(
children: [
Expanded(
child: Center(
child: Text('Content'),
),
),
Container(
height: 50,
color: Colors.blue,
child: Center(
child: Text('Bottom'),
),
),
],
),
);
}
}
```
在这个例子中,我们使用了 Scaffold 组件作为页面的根组件,其中包含了一个 AppBar 和一个 body。body 是一个 Column 组件,包含了两个子组件:一个 Expanded 组件和一个 Container 组件。Expanded 组件会将其内部的子组件展开,占据剩余的所有空间。在本例中,我们将 Expanded 组件的子组件设置为一个居中的文本组件。Container 组件则设置了一个固定高度的底部组件,并设置了其背景颜色和文本内容。
这样,我们就实现了一个带顶部和底部组件的页面。