Question

我有一个ListView在其子级中具有TextField小部件。 Listview的项目可以动态更改。当我按下“添加行”按钮时，应添加一个新行，并且应突出显示属于新添加行的文本字段（应显示键盘。）如何实现此目的？

这是我的示例代码：

import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  MainPage({Key key}) : super(key: key);
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<String> list = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('NoteList App'),
        ),
        body: Column(children: <Widget>[
          Expanded(child: _buildList(context)),
          FlatButton(
              onPressed: () {
                setState(() {
                  list.add('new');
                });
              },
              child: Text('Add row'))
        ]));
  }

  Widget _buildList(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      padding: const EdgeInsets.only(top: 1.0),
      itemBuilder: (context, index) {
        return ListItem(textContent: list[index]);
      },
    );
  }
}

class ListItem extends StatelessWidget {
  var _txt = TextEditingController();
  final String textContent;

  ListItem({Key key, this.textContent}) : super(key: key) {
    _txt.text = textContent ?? '';
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _txt,
      textInputAction: TextInputAction.go,
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以定义一个@NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) { final Dialog d = super.onCreateDialog(savedInstanceState); // view hierarchy is inflated after dialog is shown d.setOnShowListener(new DialogInterface.OnShowListener() { @Override public void onShow(DialogInterface dialogInterface) { //this disables outside touch d.getWindow().findViewById(R.id.touch_outside).setOnClickListener(null); //this prevents dragging behavior View content = d.getWindow().findViewById(R.id.design_bottom_sheet); content.setLayoutParams(new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.MATCH_PARENT, CoordinatorLayout.LayoutParams.MATCH_PARENT)); ((CoordinatorLayout.LayoutParams) content.getLayoutParams()).setBehavior(null); } }); return d; }类，然后将Item放入其中
然后使用FocusNode

代码段

FocusScope.of(context).requestFocus

工作演示

完整代码

class Item {
  String textContent;
  FocusNode myFocusNode;
  TextEditingController myController;

  Item(this.textContent, this.myFocusNode, this.myController);
}


List<Item> list = [
  Item('one', FocusNode(), TextEditingController()),
  Item('two', FocusNode(), TextEditingController()),
  Item('three', FocusNode(), TextEditingController()),
  Item('four', FocusNode(), TextEditingController())
];

onPressed: () {
                setState(() {
                  list.add(Item('new', FocusNode(), TextEditingController()));
                });

                WidgetsBinding.instance.addPostFrameCallback((_) {
                  FocusScope.of(context)
                      .requestFocus(list[list.length - 1].myFocusNode);
                });
              },

如何将焦点设置为ListView中的TextField

1 个答案: