编辑文本按钮- Flutter

lmyy7pcs  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(226)

我希望用户能够在单击编辑按钮时编辑注解平铺(see screenshot)中的文本。我看了一遍又一遍的教程,但我还是不能让它工作。我该怎么做?非常感谢您的帮助!
代码如下:

import 'package:flutter/material.dart';

class PatientNotesTile extends StatelessWidget {
  final String date;
  final String text;

  const PatientNotesTile({super.key, required this.date, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade300.withOpacity(0.4),
        borderRadius: BorderRadius.circular(15),
      ),
      child: ListTile(
        title: Padding(
          padding: const EdgeInsets.only(bottom: 5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                date,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15.0,
                    color: Colors.deepPurple.shade100),
              ),

              // Edit Button
              IconButton(
                icon: Icon(Icons.edit, color: Colors.deepPurple.shade100),
                onPressed: () {},
              ),
            ],
          ),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(bottom: 15.0),
          child: Text(
            text,
            style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
                color: Colors.white),
          ),
        ),
      ),
    );
  }
}
inb24sb2

inb24sb21#

您可以在TextFiled上使用readOnly: readOnly。当用户按下编辑图标,使其可写。其他装饰可以根据只读bool进行调整。

class PatientNotesTile extends StatefulWidget {
  final String date;
  final String text;

  const PatientNotesTile({super.key, required this.date, required this.text});

  @override
  State<PatientNotesTile> createState() => _PatientNotesTileState();
}

class _PatientNotesTileState extends State<PatientNotesTile> {
  late final TextEditingController controller = TextEditingController.fromValue(TextEditingValue(text: widget.text, selection: TextSelection.collapsed(offset: widget.text.length)));

  bool readOnly = true;
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade300.withOpacity(0.4),
        borderRadius: BorderRadius.circular(15),
      ),
      child: ListTile(
        title: Padding(
          padding: const EdgeInsets.only(bottom: 5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                widget.date,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0, color: Colors.deepPurple.shade100),
              ),

              // Edit Button
              IconButton(
                icon: Icon(
                  readOnly ? Icons.edit : Icons.save,
                  color: Colors.deepPurple.shade100,
                ),
                onPressed: () {
                  setState(() {
                    readOnly = !readOnly;
                  });
                },
              ),
            ],
          ),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(bottom: 15.0),
          child: TextField(
            controller: controller,
            readOnly: readOnly,
            decoration: InputDecoration(
              border: readOnly ? InputBorder.none : OutlineInputBorder(borderRadius: BorderRadius.circular(15.0)),
              hintText: "Enter notes here",
              hintStyle: TextStyle(color: Colors.deepPurple.shade100),
            ),
            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

相关问题