flutter - 以最大宽度/高度展开？

Question

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

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

下面两种情况
当行 > 100 且行 < 100 时

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