以下是一个Flutter跨平台开发的实战代码示例,实现iOS和Android平台的统一界面,包含常见功能模块:

基础页面结构

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '跨平台Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        platform: TargetPlatform.android, // 统一风格
      ),
      home: HomePage(),
    );
  }
}


 

统一界面组件

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;
  final TextEditingController _controller = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('统一界面'),
        actions: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SettingsPage()),
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: '输入内容',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            Text(
              '点击次数: $_counter',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

平台适配对话框

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设置'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('主题设置'),
            onTap: () => _showThemeDialog(context),
          ),
          ListTile(
            title: Text('关于'),
            onTap: () => _showAboutDialog(context),
          ),
        ],
      ),
    );
  }

  void _showThemeDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('选择主题'),
          content: SingleChildScrollView(
            child: Column(
              children: [
                _buildThemeOption(context, '浅色', ThemeMode.light),
                _buildThemeOption(context, '深色', ThemeMode.dark),
                _buildThemeOption(context, '系统默认', ThemeMode.system),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildThemeOption(
      BuildContext context, String text, ThemeMode mode) {
    return ListTile(
      title: Text(text),
      onTap: () {
        // 实现主题切换逻辑
        Navigator.pop(context);
      },
    );
  }

  void _showAboutDialog(BuildContext context) {
    showAboutDialog(
      context: context,
      applicationName: '统一界面Demo',
      applicationVersion: '1.0.0',
    );
  }
}

平台特定适配

// 在需要区分平台的地方使用以下判断
if (Theme.of(context).platform == TargetPlatform.iOS) {
  // iOS特定样式或行为
} else if (Theme.of(context).platform == TargetPlatform.android) {
  // Android特定样式或行为
}

注意事项

  • 使用Material组件库确保基础组件在双平台表现一致
  • 通过ThemeData.platform设置统一风格
  • 需要平台差异时使用条件判断
  • 对话框等交互元素使用平台适配的显示方式

这段代码实现了基础页面结构、统一界面组件、平台适配对话框等功能模块,可以直接作为项目模板使用。根据实际需求可以扩展更多功能组件。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐