面试题：Flutter中如何通过Flex布局实现动态的行和列布局

Question

请描述在Flutter中使用Flex布局（Row和Column）来根据数据动态调整子部件排列的方法。假设你有一个包含多个文本子部件的列表，需要根据屏幕宽度动态决定每行显示的子部件数量，简述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 使用LayoutBuilder获取屏幕宽度。
2. 根据屏幕宽度设定每行显示子部件数量的阈值。
3. 将文本子部件列表按设定的每行数量进行分组。
4. 使用Column和Row构建布局，将分组后的子部件依次排列。

关键代码示例

import 'package:flutter/material.dart';

class DynamicFlexLayout extends StatelessWidget {
  final List<String> textList = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6'];

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 根据屏幕宽度设定每行显示子部件数量
        int itemsPerRow = constraints.maxWidth > 600? 3 : 2;

        // 将文本子部件列表按设定的每行数量进行分组
        List<List<String>> groupedTextList = [];
        for (int i = 0; i < textList.length; i += itemsPerRow) {
          groupedTextList.add(textList.sublist(i, i + itemsPerRow < textList.length? i + itemsPerRow : textList.length));
        }

        return Column(
          children: groupedTextList.map((group) {
            return Row(
              children: group.map((text) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(text),
                );
              }).toList(),
            );
          }).toList(),
        );
      },
    );
  }
}

在main.dart中调用：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('动态Flex布局'),
      ),
      body: DynamicFlexLayout(),
    ),
  ));
}