面试题：Flutter Container样式与约束的复杂布局应用

Question

假设要在一个Container中放置多个子Widget，要求子Widget在水平方向均匀分布且宽度随父容器自适应，同时Container本身有渐变背景，并且当子Widget数量超过一定值时，Container出现垂直滚动条，如何实现这样的布局效果？请详细说明思路并给出关键代码片段。

Answer 1

思路

1. 设置渐变背景：使用 DecoratedBox 或 Container 的 decoration 属性设置渐变背景。
2. 水平均匀分布且宽度自适应：使用 Row 或 Flex 布局，并设置 mainAxisAlignment: MainAxisAlignment.spaceEvenly 使子Widget水平均匀分布。使用 Flexible 或 Expanded 包裹子Widget以使其宽度随父容器自适应。
3. 处理滚动情况：当子Widget数量超过一定值时，使用 SingleChildScrollView 或 ListView 包裹整个布局，使其在垂直方向可滚动。

关键代码片段（以Flutter为例）

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  final List<Widget> children;

  MyWidget({required this.children});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Colors.blue, Colors.green],
        ),
      ),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: children.map((child) => Flexible(child: child)).toList(),
        ),
      ),
    );
  }
}

在使用时：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyWidget(
        children: List.generate(
          20,
          (index) => Container(
            height: 50,
            color: Colors.red,
            child: Center(child: Text('Item $index')),
          ),
        ),
      ),
    ),
  ));
}