Flutter setState 动态添加项目答案

【问题标题】：Flutter setState adding items dynamicallyFlutter setState 动态添加项目
【发布时间】：2021-12-23 22:47:05
【问题描述】：

所以我希望用户在 TextFormField 中输入，然后使用 setState 弹出上面的 Text 字段，或者如果有人有更好的建议来实现它。之后我会用列表或其他东西改进该文本字段......

设置状态码

  TextEditingController textcontroller = TextEditingController();
  
  Widget addtasks() {
    setState(() {
      Text(textcontroller.text);
    });
    return Text(textcontroller.text);
  }

表格制作者代码

Widget form_maker(textcontroller) {
  return TextFormField(
    controller: textcontroller,
    keyboardType: TextInputType.text,
    onFieldSubmitted: (String value) {
      print(value);
    },
    onChanged: (String value) {
      print(value);
    },
    decoration: const InputDecoration(
      labelText: 'Add task...',
      prefixIcon: Icon(
        Icons.add,
      ),
      border: OutlineInputBorder(),
    ),
  );
}

FloatingActionButton 也有计划，我实现了 ShowBottomSheet，但无法将它链接到其中的主体 onPressed func 中的任何内容

工厂代码

floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        backgroundColor: Colors.red,
        hoverColor: Colors.white,
        splashColor: Colors.white,
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (context) {
                return Wrap(
                  children: [
                    InkWell(
                      child: const ListTile(
                        leading: Icon(Icons.edit),
                        title: Text('Add Task'),
                      ),
                      onTap: () {},
                    ),
                    const ListTile(
                      leading: Icon(Icons.share),
                      title: Text('Share'),
                    ),
                    const ListTile(
                      leading: Icon(Icons.link),
                      title: Text('Get link'),
                    ),
                    const ListTile(
                      leading: Icon(Icons.remove_outlined),
                      title: Text('Remove'),
                    ),
                  ],
                );
              });
        },
      ),

【问题讨论】：

标签： flutter dart setstate floating-action-button

【解决方案1】：

只需在 onChanged 回调中使用 setState

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {

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

class _MyWidget extends State<MyWidget> {

  String text = "";
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(
        text,
        style: Theme.of(context).textTheme.headline4,
      ),
      const Divider(),
      TextFormField(
        controller: _controller,
        decoration: const InputDecoration(
          labelText: 'Add task...',
          prefixIcon: Icon(
            Icons.add,
          ),
          border: OutlineInputBorder(),
        ),
        keyboardType: TextInputType.text,
        onChanged: (val) {
          setState(() {
            text = _controller.text;
          });
        },
      )
    ]);
  }
}

你也可以在没有 TextEditingController 的情况下通过输入字段的值来做同样的事情

        onChanged: (val) {
              setState(() {
                text = val;
              });
            }

【讨论】：