Question

目前，我正在使用以下代码：

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

然而，我必须＆＃34;硬编码＆＃34;图标大小为100.0，MaterialButton的高度为120.0。

我希望MaterialButton占用尽可能多的空间（每个屏幕占50％），我希望这些图标能够很好地适应＆＃34;在那个空间中，理想情况下也是文本缩放。

我还没有找到在Flutter中做到这一点的方法。如果尝试这样做不是一个好主意（我希望在任何设备上使用屏幕的整个空间），请告诉我原因？

Answer 1

您可以使用LayoutBuilder在构建期间动态获取父级大小。

一个工作示例：

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

Answer 2

至于文字大小，我找不到比根据可用的最大高度使用某种比率更好的方法。

我还没有评论的权利，所以我会在这里发布：您可以使用最大高度和最大宽度之间的最小值。

它将执行类似于BoxFit.contain

的操作

Answer 3

截图：

使用FittedBox：

SizedBox.fromSize(
  size: Size.fromRadius(200),
  child: FittedBox(
    child: Icon(Icons.add),
  ),
)

Answer 4

感谢Darky，我最终使用LayoutBuilder，以及Expanded Widget，Column Widget，以及使用flex参数来给出正确的比例。至于文本大小调整，我找不到比使用基于可用最大高度的某种比率更好的方法。

body: new Container(
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
              new Expanded(
                  child: new MaterialButton(
                      child: new Column(
                        children: <Widget>[
                          new Expanded(
                            flex: 4,
                            child: new LayoutBuilder(
                                builder: (context, constraint) {
                              return new Icon(
                                Icons.timer,
                                size: constraint.biggest.height,
                              );
                            }),
                          ),
                          new Expanded(child:
                              new LayoutBuilder(builder: (context, constraint) {
                            return new Text('TIMER',
                                style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: constraint.biggest.height/30.0));
                          })),
                        ],
                      ),
                      onPressed: () {
                        showTimePicker(
                          context: context,
                          initialTime: new TimeOfDay.now(),
                        );
                      })),
              new Expanded(
                  child: new MaterialButton(
                      child: new Column(
                        children: <Widget>[
                          new Expanded(
                            flex: 4,
                            child: new LayoutBuilder(
                                builder: (context, constraint) {
                                  return new Icon(
                                    Icons.alarm,
                                    size: constraint.biggest.height,
                                  );
                                }),
                          ),
                          new Expanded(child:
                          new LayoutBuilder(builder: (context, constraint) {
                            return new Text('ALARM',
                                style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: constraint.biggest.height/30.0));
                          })),
                        ],
                      ),
                      onPressed: () {
                        showTimePicker(
                          context: context,
                          initialTime: new TimeOfDay.now(),
                        );
                      })),
            ]))

如何自动调整Flutter中的图标大小

4 个答案: