我在努力实现
屏幕,但我是新的,这不明白如何实现。我检查了许多代码,但没有帮助我,所以请帮助我。我是初学者在编码。
在这段代码中,我使用JSON文件,我能够显示列表瓷砖,但如图所示,我想添加一些文本和图标下面这个列表瓷砖,但当我添加任何小部件,它去一边领先
我不知道我该怎么做
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _items = [];
// Fetch content from the json file
Future<void> readJson() async {
final String response = await rootBundle.loadString('assets/sample.json');
final data = await json.decode(response);
setState(() {
_items = data["items"];
});
}
@override
void initState() {
super.initState();
// Call the readJson method when the app starts
readJson();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
backgroundColor: Colors.white,
centerTitle: true,
elevation: 0,
title: const Text(
'Ask Help',
style: TextStyle(color: Colors.black),
),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
//change width and height on your need width = 200 and height = 50
minimumSize: Size(160, 50),
),
child: const Text('Patient'),
)
],
),
Column(
children: <Widget>[
OutlinedButton(
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.blue, width: 1),
minimumSize: Size(160, 50)),
onPressed: () {},
child: const Text(
"NGO",
style: TextStyle(color: Colors.blue),
),
),
],
)
],
),
// Display the data loaded from sample.json
Container(
child: _items.isNotEmpty
? Expanded(
child: ListView.separated(
itemCount: _items.length,
separatorBuilder: (BuildContext context, int index) =>
Divider(height: 1),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: CircleAvatar(
child:
Text(_items[index]["imageUrl"].toString()),
),
title: Text(_items[index]["name"]),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(_items[index]["phone_number"],
style: const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.normal)),
Text(_items[index]["email_id"],
style: const TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.normal)),
// Text(
// 'Population: ${_items[index]["email_id"]}',
// style: const TextStyle(
// fontSize: 11.0,
// fontWeight: FontWeight.normal),
// ),
]
),
trailing: const Icon(Icons.more_vert),
),
);
},
),
)
: Container(
//color: Colors.amber,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 70,
child: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
//change width and height on your need width = 200 and height = 50
minimumSize: Size(300, 50),
),
child: const Text('Register'),
),
),
),
)
],
),
),
);
}
}
我的json代码:
{
"items": [
{
"id": "p1",
"name": "Item 1",
"phone_number":"8975412369",
"email_id":"abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p1",
"name": "Item 1",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p1",
"name": "Item 1",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},{
"id": "p1",
"name": "Item 1",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p2",
"name": "Item 2",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
},
{
"id": "p3",
"name": "Item 3",
"phone_number": "8975412369",
"email_id": "abc@gmail.com",
"description": "Description 1",
"imageUrl": "https://m.media-amazon.com/images/I/81S-ekaE+vS._AC_UL320_.jpg"
}
]
}
1条答案
按热度按时间z5btuh9x1#
这个问题的答案是肯定的!这里有一个最小的例子:
上面的类放在
data_model.dart
文件中。我已经为你做了一个数据模型。在处理UI之前,最好将代码组织成不同的部分。还有一个自定义小部件,用于更轻松地处理东西和DRY规则!这将转到
details.dart
文件。编辑的main.dart:
我已经修改了UI代码来表示模型更改。
您的代码和JSON示例与您想要实现的链接图像有点远,但我使用了虚构的细节来向您表示更好的示例。请随意使用代码和UI。