面试题：Flutter中针对复杂交互场景如何精准选择Widget类型

滑动切换图片
- 选择PageView Widget：
  - 原因：PageView是专门用于创建可滚动页面的组件，它允许用户通过左右滑动来浏览不同的页面。在电商APP商品详情中，用于展示多图片非常合适，其默认的滑动效果自然流畅，符合用户对于图片切换的交互习惯。
  - 工作方式：将需要展示的图片作为PageView的子Widget，PageView会根据用户的滑动操作，自动在不同图片之间切换。例如：

PageView(
  children: [
    Image.asset('image1.jpg'),
    Image.asset('image2.jpg'),
    Image.asset('image3.jpg')
  ],
)

下方分页指示点
- 选择PageIndicator（通常可以通过第三方库如flutter_page_indicator来实现）：
  - 原因：它能直观地显示当前图片所在的页面位置以及总页数，为用户提供视觉反馈，让用户清楚了解当前浏览到哪一张图片以及还有多少张图片可供浏览。
  - 工作方式：与PageView配合，通过监听PageView的滚动事件来更新自身的状态，例如当前选中的指示点。假设使用flutter_page_indicator库：

PageIndicator(
  length: imageList.length,
  controller: _pageController,
  indicatorColor: Colors.grey,
  indicatorSelectorColor: Colors.blue,
)

这里_pageController是PageView的PageController，通过它PageIndicator可以获取当前的页面索引。 3. 图片缩放交互

选择InteractiveViewer Widget：
- 原因：InteractiveViewer提供了一个交互区域，允许用户对其子Widget进行缩放和平移操作。在电商APP中，用户常常希望能够放大图片查看细节，InteractiveViewer能很好地满足这一需求。
- 工作方式：将图片包裹在InteractiveViewer内，用户就可以通过手势（如双指缩放、单指平移）对图片进行缩放和平移操作。例如：

InteractiveViewer(
  child: Image.asset('image1.jpg'),
)

综合实现方式：将InteractiveViewer作为PageView的子Widget，这样每个图片都具备缩放功能，同时通过PageIndicator来指示当前图片所在的页码。例如：

Column(
  children: [
    Expanded(
      child: PageView(
        controller: _pageController,
        children: [
          InteractiveViewer(
            child: Image.asset('image1.jpg'),
          ),
          InteractiveViewer(
            child: Image.asset('image2.jpg'),
          ),
          InteractiveViewer(
            child: Image.asset('image3.jpg'),
          )
        ],
      ),
    ),
    PageIndicator(
      length: imageList.length,
      controller: _pageController,
      indicatorColor: Colors.grey,
      indicatorSelectorColor: Colors.blue,
    )
  ],
)

这里需要定义并管理好_pageController来实现PageView和PageIndicator之间的联动。

星途面试题库

面试题：Flutter中针对复杂交互场景如何精准选择Widget类型

知识考点

面试题答案