以最大宽度/高度展开？

Question

我想要具有一定大小的小部件，但如果可用空间太小而无法容纳它们，则它们会缩小。
假设可用空间为 100 像素，每个子控件的宽度为 10 像素。
假设由于调整大小，父级的尺寸变小到 90px。
默认情况下，如果有 10 个子级，则第 10 个子级将不会被渲染，因为它会溢出。
在本例中，我希望这 10 个子级均匀缩小，以便每个子级的宽度变为 9 像素，以适合整个父级。
即使可用尺寸大于 100px，它们也会保持原来的尺寸。
想知道是否有什么方法可以实现这一目标。

        return Expanded(
            child: Row(
                children: [
                    ...List.generate(Navigation().state.length * 2, (index) => index % 2 == 0 ?  Flexible(child: _Tab(index: index ~/ 2, refresh: refresh)) : _Seperator(index: index)),
                    Expanded(child: Container(color: ColorScheme.brightness_0))
                ]
            )
        );
...
    _Tab({ required this.index, required this.refresh }) : super(
        constraints: BoxConstraints(minWidth: 120, maxWidth: 200, minHeight: 35, maxHeight: 35),
...

Answer 1

你需要更改Expanded为Flexible

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(appBar: AppBar(), body: Body()),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      color: Colors.green,
      child: Row(
        children: List.generate(10, (i) {
          return Flexible(
            child: Container(
              constraints: BoxConstraints(maxWidth: 10, maxHeight: 10),
              foregroundDecoration: BoxDecoration(border: Border.all(color: Colors.yellow, width: 1)),
            ),
          );
        }),
      ),
    );
  }
}

当 row > 100 和 row < 100 时， 有以下两种情况

可选，您可以将mainAxisAlignment属性添加到Row例如
mainAxisAlignment: MainAxisAlignment.spaceBetween,