uniapp中开发app时如何设置css显示和隐藏uni-icons并同时保留其占用的空间，且不会影响UI的呈现

在UniApp中开发APP时，如果你想要控制uni-icons的显示和隐藏，并保持它们占用的空间不影响UI布局，你可以通过CSS的`display`属性来实现。以下是一个简单的步骤：

1. **HTML结构**:
首先，在需要动态控制的元素上，将uni-icons包裹在一个容器里，比如`<view class="icon-container">...</view>`。

2. **CSS样式**:
使用`.icon-container`选择器，设置默认状态下的图标展示样式，如：

   .icon-container {
     display: inline-block; /* 或者 flex / block，取决于图标的位置 */
   }
   
   .icon-container.hidden {
     display: none; /* 当需要隐藏图标时，将此类添加到图标容器 */
   }

3. **JavaScript控制**:
利用Vue的v-if/v-show指令或自定义事件来切换`hidden`类，例如：

   <template>
     <view :class="{ hidden: isIconHidden }" @toggle-icon="toggleIcon">
       <uni-icon type="close" slot="prefix"></uni-icon> 显示/隐藏图标
     </view>
   </template>

   <script>
   export default {
     data() {
       return {
         isIconHidden: false,
       };
     },
     methods: {
       toggleIcon() {
         this.isIconHidden = !this.isIconHidden;
       },
     },
   };
   </script>

4. **效果示例**:
当`isIconHidden`为`true`时，图标会被隐藏，但仍会保留其原有的占位空间，因为它的`display`属性是`none`而不是`block`，所以不会影响其他内容的布局。