Flutter 跨平台开发:iOS+Android 统一界面实战
这段代码实现了基础页面结构、统一界面组件、平台适配对话框等功能模块,可以直接作为项目模板使用。根据实际需求可以扩展更多功能组件。
·
以下是一个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设置统一风格
- 需要平台差异时使用条件判断
- 对话框等交互元素使用平台适配的显示方式
这段代码实现了基础页面结构、统一界面组件、平台适配对话框等功能模块,可以直接作为项目模板使用。根据实际需求可以扩展更多功能组件。
更多推荐
所有评论(0)