如何在flutter上对圆形和方形物体进行自适应缩放？

Question

例如，在下面的代码中，如果我垂直调整窗口大小，则按钮图标和保存图标按钮的容器图标会正确缩放，并且不会出现任何像素溢出，但如果我水平调整窗口大小，它会在一定长度后溢出。在我的 1080p 27 英寸显示器上，当窗口宽度小于 265 时，它会溢出。 我想知道我可以使用什么自适应重新缩放，以便当水平它不能适合图标时它也会重新缩放以确保没有像素溢出？ 对于矩形的东西很容易，因为你可以设置宽度和高度，但对于圆形或方形的形状我很难。

import "dart:ffi" as ffi;
import "package:flutter/material.dart";

const Color appBarColor = Color(0xFF1B5E20);
const Color white = Color(0xFFFFFFFF);

void main() {
  runApp(const CalcWidget());
}

class CalcWidget extends StatelessWidget {
    const CalcWidget({super.key});
    @override
    Widget build(BuildContext context) {
        final Size scrnSize = MediaQuery.sizeOf(context);
        return getMaterialApp(scrnSize);
    }
}

MaterialApp getMaterialApp(Size scrnSize) {
    final Scaffold home = Scaffold (
        backgroundColor : Colors.white38,
        body: SafeArea(
            child: Column (
                children: <Widget>[
                getAppBar(scrnSize),
                ],
            ),
        )
    );
    return MaterialApp (home : home);
}

Container getAppBar(Size scrnSize) {
    final double h = scrnSize.height * 0.08;
    final double subContainerSz = h - (h * 0.08);
    return Container(
        width: scrnSize.width,
        height: h,
        decoration: const BoxDecoration (
            color: appBarColor,
            shape: BoxShape.rectangle
        ),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
                Row (
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget> [
                        const SizedBox(width: 4),
                        createIconButtonContainer(Icons.menu, subContainerSz, (){})
                    ]
                ),
                const Text (
                    "Calculator",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: white,
                        fontWeight: FontWeight.bold
                    )
                ),
                Row (
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                        createIconButtonContainer(Icons.arrow_upward, subContainerSz, (){}),
                        const SizedBox(width: 4),
                        createIconButtonContainer(Icons.arrow_downward, subContainerSz, (){}),
                        const SizedBox(width: 4)
                    ],
                )
            ],
        ),
    );
}

Container createIconButtonContainer(IconData icon, double containerSz, Function() onPress) {
    final Container ibc = Container(
        width: containerSz,
        height: containerSz,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: appBarColor.withOpacity(0.5),
            shape: BoxShape.circle,
            border: Border.all(color: appBarColor, width: 2),
            boxShadow: <BoxShadow>[
                BoxShadow(
                    color: const Color(0xFF000000).withOpacity(0.35),
                    spreadRadius: 1,
                    blurRadius: 5,
                    offset: const Offset(0, 3),
                )
            ]
        ),
        child: Center(
            child : IconButton(
                padding: EdgeInsets.zero,
                icon: Icon (
                    icon,
                    color: white,
                    size: containerSz*0.6,
                ),
                onPressed: onPress,
            )
        )
    );
    return ibc;
}

Answer 1

您可以使用 LayoutBuilder，它是一个小部件，允许根据可用空间选择显示内容。

下面是 LayoutBuilder 的示例，如果可用空间大于 265，则显示宽度为 265 的容器（检查变量

_whicheverWidthYouWant

）；如果可用空间小于 265，则显示宽度为可用空间的容器：

class LayoutBuilderExample extends StatelessWidget {
  const LayoutBuilderExample({super.key});
  final _whicheverWidthYouWant = 265.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > _whicheverWidthYouWant) {
            return Container(
              height: 100,
              width: _whicheverWidthYouWant,
              color: Colors.red,
            );
          } else {
            return Container(
              height: 100,
              width: constraints.maxWidth,
              color: Colors.red,
            );
          }
        },
      ),
    );
  }

了解更多信息：https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html