HarmonyOS鸿蒙Next中在swiper中设置图片大小时总是会跟随swiper大小

HarmonyOS鸿蒙Next中在swiper中设置图片大小时总是会跟随swiper大小

3 回复

可以参考如下代码：

@Entry
@Component
struct Page31 {
  @State data: string[] = [
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
  ];

  build() {
    Column() {
      Swiper() {
        ForEach(this.data, (item:string,index:number)=>{
          Column() {
            Image(item).width(100).height(200)
          }
        })
      }.width(300).height(200)
      .cachedCount(this.data.length)
      //.interval(1000)
      .border({
        width:2,
        color:Color.Blue
      })
      .indicator(false)
      .autoPlay(true)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中在swiper中设置图片大小时总是会跟随swiper大小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Swiper组件默认会根据其父容器的大小调整子组件的大小。如果你在Swiper中设置图片大小，图片会自动跟随Swiper的大小进行缩放。这是由于Swiper的默认布局行为导致的。

要解决这个问题，你可以通过设置图片的宽度和高度来固定图片的大小，而不是让图片跟随Swiper的大小。你可以使用width和height属性来指定图片的尺寸。例如：

<Image
    width="200px"
    height="200px"
    src="your_image_source.png"
/>

这样，图片的大小将保持为200px x 200px，而不会跟随Swiper的大小变化。

如果你希望图片在Swiper中保持原始比例，可以使用object-fit属性。例如：

<Image
    width="100%"
    height="100%"
    object-fit="contain"
    src="your_image_source.png"
/>

object-fit="contain"会保持图片的原始比例，同时确保图片完整地显示在Swiper中。

通过以上方法，你可以在Swiper中控制图片的大小，而不让它跟随Swiper的大小变化。

在HarmonyOS鸿蒙Next中，Swiper组件默认会使其子元素（如图片）适应其自身大小。要控制图片的大小而不让其跟随Swiper大小，可以通过以下方式实现：

  1. 设置固定尺寸：在图片组件中明确设置width和height属性，确保图片保持固定尺寸，而不是自适应Swiper。

    <image src="image.png" width="200px" height="150px">

  2. 使用布局属性：通过flex布局或position属性控制图片的位置和大小，确保其不受Swiper影响。

    <image src="image.png" style="width: 200px; height: 150px; align-self: center;">

  3. 外层容器控制：将图片包裹在一个固定大小的容器中，确保图片大小由容器决定。

    <div style="width: 200px; height: 150px;">
    <image src="image.png" width="100%" height="100%">
</div>

通过这些方法，可以避免图片随Swiper大小变化，保持其独立尺寸。

回到顶部