【发布时间】：2022-01-10 10:56:23
【问题描述】：
我正在尝试用颤振制作简单的聊天应用程序我有两个屏幕聊天列表和聊天页面 导航有效，我传递了数据，但没有显示上一个按钮 当我从网上看到示例代码时，它们只使用无状态小部件，我使用主页作为有状态小部件，第二页是无状态小部件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' show json;
import 'token.dart';
import 'chat.dart';
void main() {
var x = const AppPage();
runApp(x);
}
class AppPage extends StatefulWidget {
const AppPage({Key? key}) : super(key: key);
static String username = "";
@override
State<StatefulWidget> createState() => _AppState();
}
class _AppState extends State<AppPage> {
var userrName = AppPage.username;
var MessagesList = [];
var profileImg = "http://localhost:5000/images/profiles/avatar.png";
var refreshToken = "";
void user_data_Getter(token) async {
final response = await http.post(
Uri.parse('http://localhost:5000/get/my/data/'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer ${token}',
},
);
var repo = json.decode(response.body);
setState(() {
profileImg = "http://localhost:5000/${repo['user']['avatar']}";
userrName = repo['user']['name'];
MessagesList = repo['messages'];
//print(MessagesList.length);
});
return repo;
}
void fetcher() async {
final response = await http.post(
Uri.parse('http://localhost:5000/api/token/'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: json.encode(<String, String>{
'email': "mohnas914@gmail.com",
'password': 'admin',
}),
);
var repo = json.decode(response.body);
setState(() {
refreshToken = repo['refresh'];
});
return user_data_Getter(repo['access']);
}
@override
void initState() {
fetcher();
super.initState();
}
void NavFun(BuildContext ctx, datas) {
Navigator.of(ctx).pushReplacement(MaterialPageRoute(builder: (_){
return ChatScreen(datas);
}));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0A1D49),
title: Text("Hello, ${userrName}"),
leading: Padding(
padding: EdgeInsets.fromLTRB(4.0, 4.0, 4.0, 4.0),
child: Material(
shape: CircleBorder(),
child: ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: Image.network(
profileImg,
fit: BoxFit.cover,
)),
),
)),
body: Container(
margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
color: Color(0xFF1D264B),
),
child: Container(
margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
color: Color(0xFF0A1D49),
),
child: Container(
margin: EdgeInsets.fromLTRB(25.0, 25.0, 0.0, 0.0),
child: Center(
child: ListView.builder(
itemCount: (MessagesList.length > 0) ? MessagesList.length : 0,
itemBuilder: (BuildContext context, index) {
return Center(
child: InkWell(
onTap: () => NavFun(context, {
'id': MessagesList[index]['sender']['id'],
'name': MessagesList[index]['sender']['name'],
'img': MessagesList[index]['sender']['pic'],
'token': refreshToken
}),
child: Container(
/*decoration:BoxDecoration(
border: Border(bottom:BorderSide(width: 1.0, color: Colors.white) )
), */
margin: EdgeInsets.fromLTRB(
0.0, (index > 0) ? 25.0 : 0.0, 0.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(children: [
CircleAvatar(
backgroundImage: NetworkImage(
'http://localhost:5000${MessagesList[index]['sender']['pic']}'),
),
Container(
margin:
EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'${MessagesList[index]['sender']['name']}',
style: TextStyle(
color: Colors.white,
fontSize: 20.0)),
Container(
margin: EdgeInsets.fromLTRB(
15.0, 0.0, 0.0, 0.0),
child: Row(children: [
Text(
'${MessagesList[index]['content']}',
style: TextStyle(
color: Colors.white,
fontSize: 20.0)),
]),
)
],
),
),
])),
Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Text(
'${MessagesList[index]['date']}',
style: TextStyle(
color: Colors.white, fontSize: 20.0),
),
)
])),
));
},
),
),
),
),
),
));
}
}
这是我的第二页代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' show json;
import 'token.dart';
class ChatScreen extends StatelessWidget {
final data;
ChatScreen(this.data);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0A1D49),
title: Text("Hello, ${data['name']}"),
leading: Padding(
padding: EdgeInsets.fromLTRB(4.0, 4.0, 4.0, 4.0),
child: Material(
shape: CircleBorder(),
child: ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: Image.network(
"http://localhost:5000${data['img']}",
fit: BoxFit.cover,
)),
),
)),
),
);
}
}
我不知道导航发生了什么，因为我 8 小时前才开始学习颤振 我认为它来自边缘网络，因为我没有使用 android 模拟器 * 不支持 cpu * 但来自在线的示例代码运行顺利
【问题讨论】：
标签： flutter flutter-web