Flutter + OpenHarmony 响应式布局实战：一套代码，完美适配全场景设备

// lib/utils/responsive.dart
extension Responsive on BuildContext {
  bool get isWatch => width < 300;
  bool get isPhone => width >= 300 && width < 600;
  bool get isTablet => width >= 600 && width < 900;
  bool get isTv => width >= 900;

  double get width => MediaQuery.sizeOf(this).width;
  bool get isLandscape => MediaQuery.orientationOf(this) == Orientation.landscape;
}

if (context.isTv) {
  return TvHomePage();
} else if (context.isPhone) {
  return PhoneHomePage();
}

Widget build(BuildContext context) {
  if (context.isPhone) {
    return Scaffold(
      body: ListView(children: [
        ArticleHeader(),
        ArticleContent(),
      ]),
    );
  } else {
    return Scaffold(
      body: Row(
        children: [
          Expanded(child: ArticleList()), // 左侧列表
          Expanded(child: ArticleDetail()), // 右侧详情
        ],
      ),
    );
  }
}

int crossAxisCount = 2;
if (context.isWatch) crossAxisCount = 1;
if (context.isTablet) crossAxisCount = 3;
if (context.isTv) crossAxisCount = 4;

return GridView.count(
  crossAxisCount: crossAxisCount,
  childAspectRatio: context.isTv ? 1.8 : 1.0, // 智慧屏卡片更宽
  children: items.map((item) => ProductCard(item)).toList(),
);

if (context.isTv || context.isTablet) {
  return Row(
    children: [
      SizedBox(width: 240, child: NavigationRail(...)),
      Expanded(child: content),
    ],
  );
} else {
  return Scaffold(
    appBar: AppBar(title: Text('设置')),
    body: content,
    drawer: Drawer(child: ListView(...)),
  );
}

Widget buildFocusableItem(VoidCallback onTap) {
  return FocusableActionDetector(
    enabled: context.isTv || context.isCar,
    actions: {ActivateIntent: CallbackAction(onInvoke: onTap)},
    child: Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        border: _hasFocus ? Border.all(color: Colors.blue, width: 3) : null,
      ),
      child: child,
    ),
  );
}

TextStyle get adaptiveTextStyle {
  if (context.isTv) return TextStyle(fontSize: 24);
  if (context.isWatch) return TextStyle(fontSize: 14);
  return TextStyle(fontSize: 16);
}

List<Widget> buildActions() {
  final actions = [FavoriteButton()];
  
  if (!context.isWatch && !context.isCar) {
    actions.add(ShareButton()); // 手表/车机不显示分享
  }
  
  return actions;
}

Widget build(BuildContext context) {
  final isLarge = MediaQuery.sizeOf(context).width > 600; // 每帧都算
  ...
}

class ResponsiveWidget extends StatelessWidget {
  final Widget Function(BuildContext, BoxConstraints) builder;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (ctx, constraints) {
        final isLarge = constraints.maxWidth > 600;
        return builder(ctx, isLarge);
      },
    );
  }
}

git clone https://gitee.com/openharmony-flutter/oh_responsive_template.git
cd oh_responsive_template
flutter run --platform=openharmony