1

我对 Flutter 比较陌生，虽然我真的很喜欢它，但我正在努力寻找一种方法来将父级中的状态值更新为showModalBottomSheet. showModalBottomSheet我想我理解这个问题是当它们在父级中发生变化时这些值没有反映，因为showModalBottomSheet当状态更新时不会重建。

我正在存储title和content在父项中，因为我也希望将其用于编辑和创建待办事项。我认为showModalBottomSheet可以为两者共享。我在模拟器上附上一张图片。我期望的是，当title更改（即不再是空字符串）时，“添加待办事项”按钮应该启用，但它目前保持禁用状态，除非我关闭模式并重新打开它。

任何帮助或见解将不胜感激。下面是我main.dart文件中的代码，其中包含showModalBottomSheet需要传递的状态值。NewToDo包含模式中的文本字段，用于捕获值并main相应地更新状态。

**编辑**

我看过这个链接，但它并没有真正解释如何将状态从父小部件传递到showBottomModalSheet小部件，它只是展示了如何在showBottomModalSheet小部件中管理状态。我的目标是从内部改变状态，main以便能够在内部选择showBottomModalSheet。

主要.dart

import 'package:flutter/material.dart';
import './todoitem.dart';
import './todolist.dart';
import 'classes/todo.dart';
import './newtodo.dart';


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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Do Homie',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const MyHomePage(title: "It's To Do's My Guy"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key, 
    required this.title,
  }) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String content = '';
  String title = '';
  int maxId = 0;
  ToDo? _todo;
  final titleController = TextEditingController();
  final contentController = TextEditingController();
  List<ToDo> _todos = [];

  void _addTodo(){

    final todo = ToDo ( 
      title: title,
      id: maxId,  
      isDone: false,
      content: content
    );

    if (_todo != null){
      setState(() {
        _todos[_todos.indexOf(_todo!)] = todo;
      });
    } else {
      setState(() {
        _todos.add(todo);
      });
    }

    setState(() {
      content = '';
      maxId = maxId++;
      title = '';
      _todo = null;
    });

    contentController.text = '';
    titleController.text = '';
    
  }

  @override
  void initState() {
    super.initState();
    titleController.addListener(_handleTitleChange);
    contentController.addListener(_handleContentChange);
    futureAlbum = fetchAlbum();
  }

  void _handleTitleChange() {
    setState(() {
      title = titleController.text;
    });
  }

  void _handleContentChange() {
    setState(() {
      content = contentController.text;
    });
  }

  void _editTodo(ToDo todoitem){
    setState(() {
      _todo = todoitem;
      content = todoitem.content;
      title = todoitem.title;
    });
    contentController.text = todoitem.content;
    titleController.text = todoitem.title;
  }

  void _deleteToDo(ToDo todoitem){
    setState(() {
      _todos = List.from(_todos)..removeAt(_todos.indexOf(todoitem));
    });
  }

  void _clear(){
    contentController.text = '';
    titleController.text = '';
    setState(() {
      content = '';
      title = '';
      _todo = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView( 
        child: Center(
          child: Container(
            alignment: Alignment.topCenter,
            child: ToDoList(_todos, _editTodo, _deleteToDo)
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              print(context);
              return Container(child:NewToDo(titleController, contentController, _addTodo, _clear, _todo),);
            });
        },
        child: const Icon(Icons.add),
        backgroundColor: Colors.deepPurple,
      ),
    );
  }
}

新待办事项.dart

import 'package:flutter/material.dart';
import './classes/todo.dart';

class NewToDo extends StatelessWidget {

  final Function _addTodo;
  final Function _clear;
  final ToDo? _todo;
  final TextEditingController titleController;
  final TextEditingController contentController;

  const NewToDo(this.titleController, this.contentController, this._addTodo, this._clear, this._todo, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return 
          Column(children: [
              TextField(
                decoration: const InputDecoration(
                  labelText: 'Title',
                ),
                controller: titleController,
                autofocus: true,
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'Details',
                ),
               controller: contentController,
               autofocus: true,
              ),
               ButtonBar(
                  alignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: titleController.text.isNotEmpty ? () => _addTodo() : null, 
                      child: Text(_todo != null ? 'Edit To Do' : 'Add To Do'),
                      style: ButtonStyle(
                        backgroundColor: titleController.text.isNotEmpty ? MaterialStateProperty.all<Color>(Colors.deepPurple) : null,
                        overlayColor: MaterialStateProperty.all<Color>(Colors.purple), 
                      ),
                    ),
                    Visibility (
                      visible: titleController.text.isNotEmpty || contentController.text.isNotEmpty,
                      child: ElevatedButton(
                        onPressed: () => _clear(), 
                        child: const Text('Clear'),
                      )),
              ])
            ],
          );
  }
}
4

1 回答 1

2

文本控制器是listenable. 您可以将 Column 包装在两个ValueListenables 中（每个控制器一个），这将告诉该小部件在其值更新时进行更新。

@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
  valueListenable: contentController,
  builder: (context, _content, child) {
    return ValueListenableBuilder(
      valueListenable: titleController,
      builder: (context, _title, child) {
        return Column(
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Title',
              ),
              controller: titleController,
              autofocus: true,
            ),
            TextField(
              decoration: const InputDecoration(
                labelText: 'Details',
              ),
              controller: contentController,
              autofocus: true,
            ),
            ButtonBar(
              alignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed:
                      titleController.text.isNotEmpty ? () => _addTodo() : null,
                  child: Text(_todo != null ? 'Edit To Do' : 'Add To Do'),
                  style: ButtonStyle(
                    backgroundColor: titleController.text.isNotEmpty
                        ? MaterialStateProperty.all<Color>(Colors.deepPurple)
                        : null,
                    overlayColor: MaterialStateProperty.all<Color>(Colors.purple),
                  ),
                ),
                Visibility(
                  visible: titleController.text.isNotEmpty ||
                      contentController.text.isNotEmpty,
                  child: ElevatedButton(
                    onPressed: () => _clear(),
                    child: const Text('Clear'),
                  ),
                ),
              ],
            )
          ],
        );
      },
    );
  },
);

我能想到的另一个更通用的选择是使用Provider（或者，如果你足够熟悉，常规的 InheritedWidgets）和它的自述文件中建议的模式：

class Example extends StatefulWidget {
  const Example({Key key, this.child}) : super(key: key);

  final Widget child;

  @override
  ExampleState createState() => ExampleState();
}

class ExampleState extends State<Example> {
  int _count;

  void increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Provider.value(
      value: _count,
      child: Provider.value(
        value: this,
        child: widget.child,
      ),
    );
  }
}

它建议像这样阅读计数：

return Text(context.watch<int>().toString());

除了我猜你可以通过替换为引用整个有状态的小部件来将小部件的整个状态提供给_count后代this。不知道这是否被推荐。

ValueListenables 将是我的第一选择，然后可能会使用挂钩来简化它们的使用。

于 2021-10-07T17:11:12.627 回答