Flutter实现列表项选择后自动填充顶部固定TextField

以下是修改后的完整代码，已经实现了你要的功能：

import 'dart:convert';

import 'package:condomini/condominio.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<StatefulWidget> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Condominio> condomini = [];
  // 创建TextField的控制器
  final TextEditingController _indirizzoController = TextEditingController();

  @override
  void initState() {
    var url = Uri.parse('http://www.ixee.it/index.php/flutter/getcondomini');
    http.get(url).then((response) => setState(() {
          condomini = List<Condominio>.from(
            jsonDecode(response.body)['condomini']?.map(
              (mappa) => Condominio.fromMap(mappa),
            ),
          );
        }));

    super.initState();
  }

  // 页面销毁时释放控制器，避免内存泄漏
  @override
  void dispose() {
    _indirizzoController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("STEB"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.symmetric(
              horizontal: 10,
            ),
            child: Row(
              children: <Widget>[
                Flexible(
                  child: TextField(
                    // 绑定控制器到TextField
                    controller: _indirizzoController,
                    decoration: const InputDecoration(
                      contentPadding:
                          EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                      hintText: "Inserisci via",
                      hintStyle: TextStyle(color: Colors.blue, fontSize: 20),
                      isDense: true,
                    ),
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text("CERCA"),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: condomini.length,
                itemBuilder: (BuildContext context, int index) {
                  final condominio = condomini[index];
                  return ListTile(
                    title: Text(condominio.nome),
                    subtitle: Text(condominio.indirizzo),
                    trailing: const Icon(Icons.arrow_drop_up_rounded),
                    // 添加点击事件，把当前项的街道信息填入TextField
                    onTap: () {
                      _indirizzoController.text = condominio.indirizzo;
                    },
                  );
                }),
          )
        ],
      ),
    );
  }
}

关键改动说明： #

• 添加TextEditingController：创建_indirizzoController实例，这是Flutter中控制TextField文本内容的标准方式。
• 绑定控制器到TextField：给TextField的controller属性赋值，让控制器与TextField双向关联。
• 给ListTile添加点击事件：通过onTap回调，点击列表项时将当前建筑的街道信息indirizzo赋值给控制器的text属性，自动填入顶部TextField。
• 释放控制器资源：在dispose方法中销毁控制器，避免长期占用内存引发泄漏问题。

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