面试题：Flutter无状态Widget在复杂布局中的应用

Question

在一个多层嵌套且具有响应式布局需求的Flutter应用中，如何合理使用无状态Widget来提高性能并保持布局的灵活性？请结合具体的布局场景和代码示例进行说明。

Answer 1

1. 理解无状态Widget

无状态Widget是不可变的，一旦创建其状态就不能改变。这使得Flutter框架在其状态改变时可以更高效地进行重建，因为不需要追踪状态变化。

2. 多层嵌套且响应式布局场景

假设我们要构建一个产品展示页面，该页面在不同屏幕尺寸下有不同的布局。例如，在手机上是一列展示产品，在平板或桌面端是两列展示产品。

3. 代码示例

import 'package:flutter/material.dart';

class ProductCard extends StatelessWidget {
  final String productName;
  final String productDescription;

  const ProductCard({
    Key? key,
    required this.productName,
    required this.productDescription,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              productName,
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(productDescription),
          ],
        ),
      ),
    );
  }
}

class ProductList extends StatelessWidget {
  final List<String> productNames;
  final List<String> productDescriptions;

  const ProductList({
    Key? key,
    required this.productNames,
    required this.productDescriptions,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          // 手机屏幕，单列布局
          return ListView.builder(
            itemCount: productNames.length,
            itemBuilder: (context, index) {
              return ProductCard(
                productName: productNames[index],
                productDescription: productDescriptions[index],
              );
            },
          );
        } else {
          // 平板或桌面端，双列布局
          return Wrap(
            spacing: 16,
            runSpacing: 16,
            children: List.generate(productNames.length, (index) {
              return Expanded(
                child: ProductCard(
                  productName: productNames[index],
                  productDescription: productDescriptions[index],
                ),
              );
            }),
          );
        }
      },
    );
  }
}

4. 性能提升和灵活性保持

• 性能提升：通过使用无状态Widget，如ProductCard和ProductList，当数据没有变化时，Flutter不需要重新构建它们，提高了性能。例如ProductCard的属性一旦确定，就不会改变，框架不需要跟踪其内部状态变化。
• 布局灵活性：在ProductList中使用LayoutBuilder来根据屏幕宽度动态调整布局。在不同的屏幕尺寸下，通过条件判断来决定是使用ListView.builder（单列）还是Wrap（双列）布局，保持了布局的灵活性。