时间戳

首页 > 解决方案 > 在颤振中，我希望容器内的图标占据容器的最大大小

flutter - 在颤振中，我希望容器内的图标占据容器的最大大小

问题描述

Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.blueAccent
            ),
          ),
          Flexible(
            flex: 4,
            child: Container(
              color: Colors.deepOrangeAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                //mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Icon(Icons.image),
                ],
              ),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(color: Colors.blueGrey),
          ),
        ],
      ),
    );

截屏

图标仅采用其原始大小。我想让它填满容器。我试过 LayoutBuilder 但 BoxConstraints 有无限高度警告。请在不为任何小部件使用硬编码大小的情况下建议任何其他选项。

标签： fluttericonscontainerssizing

解决方案

编辑; 因此，在阅读了您的评论后，您应该使用 FittedBox 代替（如评论中所建议的那样）和BoxFit.Fill属性；所以：

 <Widget>[ Expanded(child:FittedBox(child: Icon(Icons.image),fit: BoxFit.fill)), ]

--

如果您可以更改icon为，Image则可以使用 BoxFit.fill 属性拉伸图像以填充整个容器（也将图像包装在 Expanded 小部件中）。

这是一个带有占位符的示例：

Flexible(
        flex: 4,
        child: Container(
          color: Colors.deepOrangeAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            //mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(child:                          Image.network('https://picsum.photos/250?image=9', fit:BoxFit.fill)


                      )

            ],
          ),
        ),

推荐阅读