MST
星途 面试题库

面试题:Flutter 布局结合 Spacer 实现复杂对齐需求

假设有一个垂直布局,顶部是一个标题栏,中间是一个可滚动列表,底部是一个固定的操作栏。要求在列表内容较少时,操作栏能固定在底部;列表内容较多时,操作栏随着列表滚动而滚动。请用 Flutter 代码实现该布局,且在布局中合理使用 Spacer 来处理空间分配,同时解释布局实现思路。
32.5万 热度难度
前端开发Flutter

知识考点

AI 面试

面试题答案

一键面试

实现代码

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()
          ],
        ),
      ),
    );
  }
}

布局实现思路

  1. 整体布局:使用 Column 实现垂直布局,Column 是 Flutter 中用于垂直排列子部件的常用布局。
  2. 标题栏:使用 AppBar 作为标题栏,AppBar 是 Flutter 中自带的标题栏组件,包含标题、导航栏等常见功能。这里使用 const AppBar(title: Text('标题栏')) 简单创建一个标题栏。
  3. 可滚动列表:使用 Expanded 包裹 ListView.builderExpanded 组件会自动填充剩余空间,确保列表在内容较少时不会撑满屏幕,内容较多时可以滚动。ListView.builder 是 Flutter 中用于高效构建列表的组件,通过 itemCount 指定列表项数量,itemBuilder 构建每个列表项。
  4. 操作栏:在列表下方添加操作栏相关部件,这里简单使用 Text 表示操作栏内容。然后添加 SpacerSpacer 是一个灵活的空间占位符,会自动填充剩余空间,使得操作栏在列表内容较少时固定在底部;当列表内容较多,Expanded 内的列表占用所有可用空间后,Spacer 没有空间可占,操作栏就会随着列表滚动。在操作栏和列表之间添加 SizedBox(height: 10) 是为了增加一些间距,使布局更美观。