以最大宽度/高度扩展？

Question

我想要的小部件有特定的大小，但如果可用空间太小而无法容纳它们，则会缩小。
假设可用空间为100px，每个子小部件的宽度为10px。
如果父元素的大小由于调整而变小到90px，则默认情况下，如果有10个子元素，则第10个子元素将不会呈现为溢出。
在这种情况下，我希望这10个子项均匀缩小，以使每个子项的宽度变为9px，以适应整个父元素。
即使可用空间大于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),
...

- Sombian

---

请查看此链接：https://flutter.dev/docs/development/ui/layout/constraints - Nilesh Senta

@NileshSenta，你能告诉我应该查看哪个类吗？我的英语不是很流利，这些文档让我头疼。 - Sombian

你应该查看容器类(Container class)，对于布局条件(Layout condition)，有一个可用的选项boxConstrains。 - Nilesh Senta

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时，如下：

如果需要，您可以向Row添加mainAxisAlignment属性，例如：
mainAxisAlignment: MainAxisAlignment.spaceBetween,

- Nagual

Answer 2

试试这个

ConstrainedBox(
    constraints: const BoxConstraints(maxWidth: 10,maxHeigth:10),
    child: ChildWidget(...),
)

- Ibrahim Ali

---

我按照你的回答将子元素包装在行内，但它没有起作用。我还需要为行的父元素提供固定大小吗？ - Sombian

使用 Expanded 将 ChildWidget 包装起来。 - Ibrahim Ali

Answer 3

关键在于在列中的每个子元素周围使用Flexible，并使用BoxContraints.loose()设置子元素的最大尺寸。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Make them fit',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int theHeight = 100;

  void _incrementCounter() {
    setState(() {
      theHeight += 10;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Playing with making it fit'),
      ),
      body: Container(
        color: Colors.blue,
        child: Padding(
          // Make the space we are working with have a visible outer border area
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 400, // Fix the area we work in for the sake of the example
            child: Column(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Flexible(child: SomeBox('A')),
                      Flexible(child: SomeBox('A')),
                      Flexible(child: SomeBox('BB')),
                      Flexible(child: SomeBox('CCC')),
                      Flexible(
                        child: SomeBox('DDDD', maxHeight: 25),
                        // use a flex value to preserve ratios.
                      ),
                      Flexible(child: SomeBox('EEEEE')),
                    ],
                  ),
                ),
                Container(
                  height: theHeight.toDouble(),  // This will change to take up more space
                  color: Colors.deepPurpleAccent, // Make it stand out
                  child: Center(
                    // Child column will get Cross axis alighnment and stretch.
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text('Press (+) to increase the size of this area'),
                        Text('$theHeight'),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class SomeBox extends StatelessWidget {
  final String label;
  final double
      maxHeight; // Allow the parent to control the max size of each child

  const SomeBox(
    this.label, {
    Key key,
    this.maxHeight = 45,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      // Creates box constraints that forbid sizes larger than the given size.
      constraints: BoxConstraints.loose(Size(double.infinity, maxHeight)),
      child: Padding(
        padding: const EdgeInsets.all(2.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.green,
            border: Border.all(
              // Make individual "child" widgets outlined
              color: Colors.red,
              width: 2,
            ),
          ),
          key: Key(label),
          child: Center(
            child: Text(
                label), // pass a child widget in stead to make this generic
          ),
        ),
      ),
    );
  }
}

- The Tahaan