Question

我想要具有特定大小但如果可用空间太小而无法容纳的小部件。
假设可用空间为 100 像素，每个子小部件的宽度为 10 像素。
假设由于调整大小，父母的尺寸变小到 90px。
默认情况下，如果有 10 个孩子，第 10 个孩子将不会被渲染，因为它会溢出。
在这种情况下，我希望这 10 个孩子以均匀的方式缩小，以便每个孩子的宽度变为 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

试试这个

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

Answer 2

您需要将 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,

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

以最大宽度/高度扩展？

3 个答案: