如何在父类中动态生成和存储自定义有状态的widget的状态？

Question

我目前被动态生成widget及其状态维护所困扰。

这是我的代码。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            children: <Widget>[
              DescriptionTextField(),
              DividerAddDescription(onPressed: () => print('Add another description'))
            ],
          ),
        ),
      ),
    );
  }
}


class DescriptionTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white38),
      child: TextField(
        minLines: 1,
        maxLines: null,
        style: TextStyle(
          fontSize: 16,
        ),
        decoration: InputDecoration(
          hintText: 'Enter description',
          hintStyle: TextStyle(
            fontSize: 16,
          ),
          contentPadding: EdgeInsets.symmetric(
              vertical: 10.0, horizontal: 10.0),
          border: InputBorder.none,
        ),
      ),
    );
  }
}


class DividerAddDescription extends StatelessWidget {
  DividerAddDescription({@required this.onPressed});

  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Divider(
            thickness: 1,
          ),
        ),
        FloatingActionButton(
          onPressed: onPressed,
          child: Icon(
            Icons.add,
            color: Color(0xFF232F34),
          ),
          backgroundColor: Colors.orange,
        ),
      ],
    );
  }
}

这是我的代码，屏幕是这样的。

我想实现的是

• 当点击加号按钮时，另一个 DescriptionTextField 将被添加到 Column 小部件。
• 作为一个新的 DescriptionTextField 是新增的，如果之前的 DescriptionTextField 中有描述文字，文字应该被保留。

我不知道该怎么做。

• 说明文字应该保存在哪里？是在 DescriptionTextField即我是否需要把它变成一个有状态的小组件？
• 当我有多个 DescriptionTextField例如，描述文本。

Answer 1

你应该创建一个 列表 在你 国家在那里添加新元素，并调用 设置国家 方法时添加。

class _HomeScreenState extends State<HomeScreen> {
   //Create a field which hold the elements
  List<DescriptionTextField> myDescriptions = List<DescriptionTextField>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            children: <Widget>[
              ...myDescriptions, //Add the elements to the Column using the spread operator
              DividerAddDescription(onPressed: () => setState(() => myDescriptions.add(DescriptionTextField(key: UniqueKey()))) //Adding new widget
            ],
          ),
        ),
      ),
    );
  }
}

我建议你在你的DescriptionTextField小部件中使用一个键值，因为你将动态添加小部件，Flutter可能会努力匹配各自的状态。

当然还有很多改进，但从我的角度和我从你的描述中了解到的情况来看，这可能会帮助你。