FittedBox叠加技术在Flutter 中的应用

发布于11月14日

我有一个带有两个图标的Stack.我想使用FittedBox中的第一个图标，这样图标就可以填满整个可用的空间.

当我用FittedBox包装第一个图标时--最后一个图标不起作用--图标是以它们的原始大小构建的.

当我用FittedBox包装Stack时，这两个图标都填满了整个可用的空间.

我怎样才能得到想要的结果？

import 'package:flutter/material.dart';

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Row(
          children: [
            Expanded(
              child: FittedBox(
                child: Stack(
                  children: [
                    Icon(Icons.abc),
                    SizedBox(
                      width: 10,
                      height: 10,
                      child: Icon(Icons.access_alarm),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

推荐答案

将您想要展开的图标先用SizedBox.expand再用FittedBox包装，如下所示:

import 'package:flutter/material.dart';

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Row(
          children: [
            Expanded(
              child: Stack(
                children: [
                  SizedBox.expand(
                    child: FittedBox(
                      child: Icon(Icons.abc),
                    ),
                  ),
                  Icon(Icons.access_alarm),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}