Wear OS在Galaxy Watch 5实现长图横向滚动：求代码示例及组件推荐

适用组件选择 #

• Tizen原生开发：使用Elm_Image组件承载长图，搭配Elm_Scroller滚动容器实现垂直/水平滚动，这两个是Tizen Wear UI的核心组件，适配Galaxy Watch的系统环境。
• Flutter Wear开发：用SingleChildScrollView作为滚动容器，内部嵌套Image组件，通过配置滚动方向和图片适配模式，实现长图的滚动查看。

代码示例 #

Tizen原生（C语言） #

#include <Elementary.h>

static void
_win_del(void *data, Evas_Object *obj, void *event_info)
{
   elm_exit();
}

EAPI_MAIN int
elm_main(int argc, char **argv)
{
   Evas_Object *win, *scroller, *img;

   win = elm_win_util_standard_add("long-image", "Long Image Demo");
   elm_win_autodel_set(win, EINA_TRUE);
   evas_object_smart_callback_add(win, "delete,request", _win_del, NULL);

   // 初始化滚动容器，仅开启垂直滚动
   scroller = elm_scroller_add(win);
   elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
   elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
   evas_object_size_hint_weight_set(scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, scroller);
   evas_object_show(scroller);

   // 加载长图并绑定到滚动容器
   img = elm_image_add(scroller);
   elm_image_file_set(img, "/home/user/your_long_image.png", NULL); // 替换为实际图片路径
   elm_image_no_scale_set(img, EINA_FALSE); // 保持图片比例缩放
   evas_object_size_hint_min_set(img, elm_image_object_size_get(img));
   elm_object_content_set(scroller, img);
   evas_object_show(img);

   evas_object_resize(win, 390, 430); // 匹配Galaxy Watch 5屏幕分辨率
   evas_object_show(win);

   elm_run();
   return 0;
}
ELM_MAIN()

Flutter Wear #

import 'package:flutter/material.dart';

void main() => runApp(const LongImageApp());

class LongImageApp extends StatelessWidget {
  const LongImageApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          // 若为水平长图，可设置scrollDirection: Axis.horizontal
          child: Image.asset(
            'assets/your_long_image.png', // 替换为项目内图片资源路径
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

补充说明 #

• Tizen开发可参考三星官方Tizen UI组件文档，重点学习Elm_Scroller的滚动策略配置和Elm_Image的缩放适配逻辑。
• Flutter开发可参考Flutter Wear官方文档中关于穿戴设备屏幕适配的内容，调整图片和滚动容器的适配参数。

内容的提问来源于stack exchange，提问作者Enginer