机遇屋-flutter开发中的图片Icon

flutter开发中的图片Icon

作者：ych

### 上图
![](https://img.jiyuwu.com/upload/article/2023/1/2846D72296BB23D0C20CCFA2A92D1BA6.gif)

### 配置
#### 设置文件和配置
1.首先创建好文件夹`images`后粘贴`xin.png`图片。
pubspec.yaml
```
  assets:
    - images/xin.png
```
2.编写widget
```
class ImageIconDemo extends StatelessWidget {
  const ImageIconDemo({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child:Column(
          children: [
            const Icon(Icons.add),
            IconButton(onPressed: (){}, icon:const Icon(Icons.home),),
            Container(
              width: double.infinity,
              child: Image.network("https://pbs.twimg.com/media/FlS-KNxagAEvj33?format=jpg&name=medium",fit: BoxFit.fitWidth,),
            ),
            Image.asset("images/xin.png")
          ],
        )
    );
  }
}
```

### 异常处理
#### 图片太高需要扩展
报错如下：
```
The relevant error-causing widget was:
  Column Column:file:///E:/program/flutter/jywvideos/lib/widgets/demo1.dart:47:12
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#80244 relayoutBoundary=up1 OVERFLOWING
```
中文信息如下：
```
导致错误的相关小部件是：
   专栏专栏：file:///E:/program/flutter/jywvideos/lib/widgets/demo1.dart:47:12
溢出的 RenderFlex 的方向为 Axis.vertical。
溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。 这通常是由于内容对于 RenderFlex 来说太大了。

考虑应用弹性因子（例如使用 Expanded 小部件）来强制 RenderFlex 的子元素适应可用空间，而不是调整到它们的自然大小。
这被认为是错误情况，因为它表明存在无法看到的内容。 如果内容合法地大于可用空间，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，如 ListView。

有问题的具体 RenderFlex 是：RenderFlex#80244 relayoutBoundary=up1 OVERFLOWING
```

解决方案：
您可以使用`SingleChildScrollView`
```
SingleChildScrollView(
    child: Column(
      ...
    ),
),
```

评论区

先去登录

flutter开发中的图片Icon

相关推荐

评论区