[译] 挑战 Flutter 之 WhatsApp

以下是一个简化的示例，展示如何使用Flutter创建一个类似WhatsApp的用户界面：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WhatsApp'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
        ],
      ),
      body: ChatList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.message),
      ),
    );
  }
}
 
class ChatList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage('assets/person1.jpg'),
          ),
          title: Text('John Doe'),
          subtitle: Text('Hello, how are you?'),
        ),
        // ... 更多聊天信息
      ],
    );
  }
}

这个示例展示了如何使用Flutter创建一个基本的WhatsApp界面，包括顶部的搜索和更多按钮，底部的编写消息按钮，以及聊天列表。这个例子简单明了，并且使用了Flutter的基本组件，如AppBar, ListView, ListTile, 和 CircleAvatar。在实际应用中，你可能需要处理更复杂的逻辑，如消息的发送和接收，但基础界面的创建会类似。