Flutter 跨平台统一界面实战代码

以下是一个完整的Flutter跨平台界面示例，实现了iOS和Android平台的统一UI，包含常见的功能组件：

main.dart 入口文件

import 'package:flutter/material.dart';
import 'home_screen.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '跨平台应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        platform: TargetPlatform.iOS, // 统一使用iOS风格
      ),
      home: const HomeScreen(),
    );
  }
}

home_screen.dart 主界面

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  final TextEditingController _textController = TextEditingController();
  String _displayText = '';

  static const List<Widget> _pages = [
    Center(child: Text('首页内容')),
    Center(child: Text('搜索内容')),
    Center(child: Text('个人中心')),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _updateText() {
    setState(() {
      _displayText = _textController.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('统一界面示例'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const SettingsScreen(),
                ),
              );
            },
          ),
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _textController,
              decoration: const InputDecoration(
                labelText: '输入文本',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          ElevatedButton(
            onPressed: _updateText,
            child: const Text('显示文本'),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              _displayText,
              style: Theme.of(context).textTheme.headline6,
            ),
          ),
          Expanded(child: _pages[_selectedIndex]),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

settings_screen.dart 设置页面

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('设置'),
      ),
      body: ListView(
        children: [
          SwitchListTile(
            title: const Text('深色模式'),
            value: false,
            onChanged: (bool value) {},
          ),
          const ListTile(
            title: Text('版本信息'),
            subtitle: Text('1.0.0'),
          ),
          ListTile(
            title: const Text('关于'),
            onTap: () {
              showAboutDialog(
                context: context,
                applicationName: '跨平台应用',
                applicationVersion: '1.0.0',
              );
            },
          ),
        ],
      ),
    );
  }
}

关键功能说明

跨平台UI统一

• 通过设置ThemeData中的platform属性为TargetPlatform.iOS，强制使用iOS风格组件
• 使用Material Design组件库，确保在两大平台表现一致

核心组件实现

• 底部导航栏(BottomNavigationBar)实现多页面切换
• 文本输入(TextField)与按钮交互
• 设置页面包含开关选项(SwitchListTile)和列表项(ListTile)

导航功能

• 主界面到设置页面的跳转(Navigator.push)
• 关于对话框(showAboutDialog)的展示

适配建议

1. 如需完全统一界面，建议使用Cupertino风格组件库
2. 平台特定代码可使用条件判断：

ThemeData(
  platform: Theme.of(context).platform,
)

1. 响应式布局建议使用MediaQuery检测屏幕尺寸
2. 复杂界面可考虑使用Platform.isIOS/Platform.isAndroid进行微调