我的 ConstrainedBox 不保持最小尺寸

Question

我得到一个带有卡片和居中文本的盒子，但是当我减小窗口的大小时，我的卡片消失并且文本溢出。当框小于文本时，出现溢出错误。

我希望最小的盒子尺寸为 300x300，最大的盒子尺寸为 600x600，而不是无限缩小

也许添加 Singlechildscrollview 是我能得到的最好的。我仍然认为有一种方法可以创建缩小到某个最小尺寸的卡片

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

  @override
  State<TestConstrainedBox> createState() => _TestConstrainedBoxState();
}

class _TestConstrainedBoxState extends State<TestConstrainedBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title:Text("Test Constrained Box")),body: 
  SingleChildScrollView(child:
  Container(
      margin: const EdgeInsets.only(top:20.0, left: 20.0, right: 20.0, bottom:10.0),
      child:
      SizedBox.fromSize(size: const Size(450,450),
      //OverflowBox(minHeight:300,minWidth:300,
      //maxWidth:300, maxHeight: 300,
  child:ConstrainedBox(constraints: BoxConstraints(
    minWidth:300,
    minHeight:300,
    maxWidth:350,
    maxHeight:350,
    ),
    child:
    Card(child: 
    Column(mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children:[
      //SizedBox(width:350, height:350, child:
           Text('Hello World!')
           //)
           ]))
  
))
     )
    )
    );
  }
}

Answer 1

根据官方SizedBox文档：

如果给定一个孩子，这个小部件会强制它具有特定的宽度和/或高度。如果此小部件的父级不允许这些值，则这些值将被忽略。

例如，如果父级是屏幕（强制子级与父级大小相同）或另一个 SizedBox（强制其子级具有特定的宽度和/或高度），则会发生这种情况。这可以通过将子 SizedBox 包装在一个允许其大小不超过父级大小的小部件中来解决，例如居中或对齐。

所以你必须删除 sizedBox 或用 center 包裹 ConstrainedBox。

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MaterialApp(
      home: TestConstrainedBox(),
    ));

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

  @override
  State<TestConstrainedBox> createState() => _TestConstrainedBoxState();
}

class _TestConstrainedBoxState extends State<TestConstrainedBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test Constrained Box")),
      body: SingleChildScrollView(
        child: Container(
          margin: const EdgeInsets.only(
              top: 20.0, left: 20.0, right: 20.0, bottom: 10.0),
          child: SizedBox.fromSize(
            size: const Size(450, 450),
            //OverflowBox(minHeight:300,minWidth:300,
            //maxWidth:300, maxHeight: 300,
            child: Center(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: 300,
                  minHeight: 300,
                  maxWidth: 350,
                  maxHeight: 350,
                ),
                child: Card(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      //SizedBox(width:350, height:350, child:
                      Text('Hello World!')
                      //)
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}