实现代码
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
const AppBar(title: Text('标题栏')),
Expanded(
child: ListView.builder(
itemCount: 50, // 这里假设列表有50个数据,可以根据实际情况修改
itemBuilder: (context, index) {
return ListTile(title: Text('列表项 $index'));
},
),
),
const SizedBox(height: 10),
const Text('操作栏'),
const Spacer()
],
),
),
);
}
}
布局实现思路
- 整体布局:使用
Column
实现垂直布局,Column
是 Flutter 中用于垂直排列子部件的常用布局。
- 标题栏:使用
AppBar
作为标题栏,AppBar
是 Flutter 中自带的标题栏组件,包含标题、导航栏等常见功能。这里使用 const AppBar(title: Text('标题栏'))
简单创建一个标题栏。
- 可滚动列表:使用
Expanded
包裹 ListView.builder
。Expanded
组件会自动填充剩余空间,确保列表在内容较少时不会撑满屏幕,内容较多时可以滚动。ListView.builder
是 Flutter 中用于高效构建列表的组件,通过 itemCount
指定列表项数量,itemBuilder
构建每个列表项。
- 操作栏:在列表下方添加操作栏相关部件,这里简单使用
Text
表示操作栏内容。然后添加 Spacer
,Spacer
是一个灵活的空间占位符,会自动填充剩余空间,使得操作栏在列表内容较少时固定在底部;当列表内容较多,Expanded
内的列表占用所有可用空间后,Spacer
没有空间可占,操作栏就会随着列表滚动。在操作栏和列表之间添加 SizedBox(height: 10)
是为了增加一些间距,使布局更美观。