flutter - 如何在颤动中从列表视图中填充表单

问题描述

我有一个表单小部件、一个列表小部件和一个“包装器”小部件，或者换句话说，一个父/容器小部件。因此，为了给出小部件树的概念，它就是这样。

父/容器小部件
- 表单小部件
- 按钮小部件
- 列表小部件

请注意，表单、按钮和列表小部件都是同级的，在父/容器小部件内部。我想要发生的是点击列表小部件中的列表项，并使用从列表小部件传递的数据填充表单小部件。

这是我的父小部件。

import 'package:andplus_flutter_7_gui/model/user.dart';
import 'package:andplus_flutter_7_gui/services/user_service.dart';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'crud_form.dart';
import 'crud_list.dart';

class Crud extends StatefulWidget {
  Crud({Key key, this.title}) : super(key: key);

  final String title;

  _CrudContainerState createState() => _CrudContainerState();
}

class _CrudContainerState extends State<Crud> {
  List<User> users;
  User user = User();
  UserService userService;

  @override
  void initState() {
    super.initState();
    if (userService == null) {
      userService = UserService(user);
    }
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    userService.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Builder(
          builder: (context) => Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: StreamBuilder(
                      builder: (context, AsyncSnapshot<User> snapshot) {
                        return CrudForm(
                          user: snapshot.data,
                          onUserAdded: (user) {
                            userService.addUser(user);
                          },
                        );
                      },
                      stream: userService.userObservable,
                    ),
                  ),
                  Expanded(
                    child: Text("Future button widget"),
                  ),
                  Expanded(
                    flex: 3,
                    child: StreamBuilder(
                      builder: (ctx, AsyncSnapshot<List<User>> snap) {
                        return CrudList(
                          onUserSelected: userService.userSelected,
                          users: snap.data,
                        );
                      },
                      stream: userService.usersObservable,
                    ),
                  ),
                ],
              ),
        ),
      ),
    );
  }

  void onEditUser(User user) {
    setState(() {
      user = user;
    });
  }
}

上面的小部件包装了我提到的三个小部件。

这是儿童小部件：

形式：

import 'package:andplus_flutter_7_gui/model/user.dart';
import 'package:flutter/material.dart';

class CrudForm extends StatefulWidget {
  CrudForm({Key key, this.onUserAdded, this.user}) : super(key: key);

  final User user;
  final void Function(User user) onUserAdded;

  _CrudFormState createState() => _CrudFormState(user: user);
}

class _CrudFormState extends State<CrudForm> {
  _CrudFormState({this.user});

  User user = User();
  var _key = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Builder(
        builder: (context) => Container(
              color: Colors.blueAccent[100],
              child: Form(
                key: _key,
                child: Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Text(
                            "First Name",
                            style: TextStyle(fontSize: 20),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextFormField(
                                initialValue: widget.user?.firstName == null ||
                                        widget.user.firstName.isEmpty
                                    ? user.firstName
                                    : widget.user.firstName,
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return "First name is required";
                                  }

                                  return null;
                                },
                                onSaved: (value) {
                                  setState(() {
                                    user.firstName = value;
                                  });
                                },
                              ),
                            ),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Text(
                            "Last Name",
                            style: TextStyle(fontSize: 20),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextFormField(
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return "Last name is required";
                                  }

                                  return null;
                                },
                                onSaved: (value) {
                                  setState(() {
                                    user.lastName = value;
                                  });
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                      RaisedButton(
                        child: Text(
                          "Save",
                        ),
                        splashColor: Colors.blueGrey,
                        onPressed: () {
                          if (!_key.currentState.validate()) {
                            return;
                          }
                          _key.currentState.save();
                          widget.onUserAdded(
                            new User(
                              firstName: user.firstName,
                              lastName: user.lastName,
                            ),
                          );
                        },
                      )
                    ],
                  ),
                ),
              ),
            ),
      ),
    );
  }
}

这是我的列表小部件。

import 'package:andplus_flutter_7_gui/model/user.dart';
import 'package:flutter/material.dart';

class CrudList extends StatefulWidget {
  CrudList({Key key, this.users, this.onUserSelected}) : super(key: key);

  final List<User> users;

  final SelectUser onUserSelected;

  _CrudListState createState() => _CrudListState();
}

class _CrudListState extends State<CrudList> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: ListView.builder(
        itemCount: widget.users?.length ?? 0,
        itemBuilder: (BuildContext context, int index) {
          var user = widget.users[index];
          return ListTile(
            key: Key(index.toString()),
            title: Center(
              child: Text(
                "${user.firstName} ${user.lastName}",
                style: TextStyle(color: Colors.white),
              ),
            ),
            onTap: () {
              print("${widget.users[index]} $index");
              widget.onUserSelected(widget.users[index]);
            },
          );
        },
      ),
    );
  }
}

typedef void SelectUser(User user);

只是为了进一步说明，这是我的用户服务，负责将对象添加到流中，并使用 rxdart 中的流构建器来通知状态更改。

import 'package:andplus_flutter_7_gui/model/user.dart';
import 'package:rxdart/rxdart.dart';

class UserService {
  User _editedUser = User();
  List<User> _users = <User>[];
  BehaviorSubject<User> _userSubject;
  BehaviorSubject<List<User>> _usersSubject;

  UserService(this._editedUser) {
    _userSubject = BehaviorSubject<User>.seeded(_editedUser);
    _usersSubject = BehaviorSubject<List<User>>.seeded(_users);
  }

  Observable<List<User>> get usersObservable => _usersSubject.stream;
  Observable<User> get userObservable => _userSubject.stream;

  addUser(User user) {
    _users.add(user);
    _usersSubject.add(_users);
  }

  dispose() {
    _userSubject.close();
    _usersSubject.close();
  }

  void userSelected(User user) {
    _editedUser = user;
    _userSubject.add(_editedUser);
  }
}

我错过了什么？看起来我的小部件重新构建，并在我点击列表小部件中的用户时尝试在表单中设置初始值。但是实际字段没有更新，我不知道为什么。

我会很感激任何关于如何在颤振框架内更好地处理兄弟小部件之间的数据和状态管理的文档或文章。

标签： flutterdartrxdart

解决方案

这是我尝试在本地实现的类似用例。我在这里做的是动态生成 TextFormFields 并分配 TextEditingController。

Column textField(int n) {
  List<Widget> listForm = [];
  while (n > 0) {
    var textEditingController = TextEditingController();
    listForm.add(
      TextFormField(
        controller: textEditingController,
        onTap: () {
          _selectedField = textEditingController;
        },
      ),
    );
    n--;
  }
  return Column(children: listForm);
}

单击 ListView 项会更新当前选定的 TextFormField 的文本。

InkWell(
  onTap: () {
    debugPrint('Selected $index!');
    if (_selectedField != null) {
      _selectedField!.value = TextEditingValue(text: 'Item $index');
    }
  },
  child: ListTile(
    title: Text('Item $index'),
  ),
);

完整样本

import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  TextEditingController? _selectedField;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(flex: 1, child: textField(3)),
              Expanded(flex: 1, child: listItems()),
            ],
          ),
        ),
      ),
    );
  }

  Column textField(int n) {
    List<Widget> listForm = [];
    while (n > 0) {
      var textEditingController = TextEditingController();
      listForm.add(
        TextFormField(
          controller: textEditingController,
          onTap: () {
            debugPrint('Current Controller: $textEditingController');
            _selectedField = textEditingController;
          },
        ),
      );
      n--;
    }
    return Column(children: listForm);
  }

  ListView listItems() {
    return ListView.builder(
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
          onTap: () {
            if (_selectedField != null) {
              _selectedField!.value = TextEditingValue(text: 'Item $index');
            }
          },
          child: ListTile(
            title: Text('Item $index'),
          ),
        );
      },
    );
  }
}

演示

flutter - 如何在颤动中从列表视图中填充表单

问题描述

解决方案

推荐阅读