如何自动将Flutter中的图标调整为尽可能大的大小 [英] How to automatically size Icons in Flutter to be as big as possible

问题描述

此刻，我正在使用以下代码:

At the moment, I am using the following bit of code :

   body: new Container(
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
              new MaterialButton(
                height: 120.0,
                child: new Column(
                  children: <Widget>[
                    new Icon(
                      Icons.av_timer,
                      size: 100.0,
                    ),
                    new Text('TIMER'),
                  ],
                ),
                onPressed: null,
              ),
              new MaterialButton(
                height: 120.0,
                child: new Column(
                  children: <Widget>[
                    new Icon(Icons.alarm_add, size: 100.0),
                    new Text('ALARM'),
                  ],
                ),
                onPressed: null,
              )
            ])));

但是，我不得不将Icon的大小硬编码"为100.0，将MaterialButton的高度硬编码"为120.0.

However, I have had to "hardcode" the Icon size to 100.0 and the height of the MaterialButton to 120.0.

我希望MaterialButton占用尽可能多的空间(每个空间占屏幕的50％)，并且我希望图标很好地"适合该空间，理想情况下还应与文本"缩放一起使用.

I would like the MaterialButton to take as much space as possible (50% of the screen for each), and I would like the Icons to "fit nicely" in that space, ideally along with the Text scaling as well.

我还没有在Flutter中找到做到这一点的方法.如果尝试这样做不是一个好主意(我希望它在任何设备上使用屏幕的整个空间)，请告诉我为什么?

I haven't found the way to do that in Flutter yet. If it's not a good idea to try to do this (I would like it to use the entire space of the screen on any device) please let me know why ?

推荐答案

您可以使用LayoutBuilder在构建过程中动态获取父级大小.

You can use LayoutBuilder to dynamically get the parent size during build.

一个工作示例:

void main() {
  runApp(new MaterialApp(
    home: new TestIcon(),
  ));
}

class TestIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new LayoutBuilder(builder: (context, constraint) {
        return new Icon(Icons.access_alarms, size: constraint.biggest.height);
      }),
    );
  }
}

这篇关于如何自动将Flutter中的图标调整为尽可能大的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！