Flutter：如何在ListTile下方添加文本与图标组件？

我是Flutter编程初学者，已通过JSON文件加载数据并成功展示ListTile。希望在ListTile下方添加文本和图标，但添加组件时会出现在leading侧边，尝试多种代码都无法解决，恳请帮助。

解决思路 #

ListTile的布局结构是固定的，仅支持leading、title/subtitle、trailing三个区域的内容。要在ListTile整体下方添加内容，需要将ListTile替换为Column组件，在Column中先通过Row模拟ListTile的原有布局，再在Row下方添加需要的文本和图标。

修改后的完整代码 #

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 = [];

  // 从JSON文件加载数据
  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();
    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>[
                ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    minimumSize: const Size(160, 50),
                  ),
                  child: const Text('Patient'),
                ),
                OutlinedButton(
                  style: OutlinedButton.styleFrom(
                      side: const BorderSide(color: Colors.blue, width: 1),
                      minimumSize: const Size(160, 50)),
                  onPressed: () {},
                  child: const Text(
                    "NGO",
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ],
            ),
            // 展示加载的数据
            _items.isNotEmpty
                ? Expanded(
                    child: ListView.separated(
                      itemCount: _items.length,
                      separatorBuilder: (BuildContext context, int index) =>
                          const Divider(height: 1),
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // 模拟ListTile的布局
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // Leading部分
                                  CircleAvatar(
                                    backgroundImage: NetworkImage(_items[index]["imageUrl"]),
                                  ),
                                  const SizedBox(width: 12),
                                  // Title和Subtitle部分
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(_items[index]["name"], style: const TextStyle(fontWeight: FontWeight.bold)),
                                        const SizedBox(height: 4),
                                        Text(_items[index]["phone_number"], style: const TextStyle(fontSize: 13)),
                                        const SizedBox(height: 2),
                                        Text(_items[index]["email_id"], style: const TextStyle(fontSize: 13)),
                                      ],
                                    ),
                                  ),
                                  // Trailing部分
                                  const Icon(Icons.more_vert),
                                ],
                              ),
                              // 这里添加你需要的下方文本和图标
                              const SizedBox(height: 8),
                              Row(
                                children: [
                                  const Icon(Icons.description, size: 16),
                                  const SizedBox(width: 4),
                                  Text(_items[index]["description"], style: const TextStyle(fontSize: 13)),
                                ],
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  )
                : const SizedBox(),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 70,
                child: Center(
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                      minimumSize: const 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"
    }
  ]
}

内容的提问来源于stack exchange，提问作者Sanjal