颤振- TextField在statfulbuilder在modalBottomSheet不工作 &

Question

我有一个问题。在我的代码中，我调用showModalBottomSheet，在它里面，我有一个反馈表。用户可以选择一个反应，然后留下评论提交。

因此，我必须在模态中使用StatefulBuilder来使用setState。TextField有一个奇怪的行为，虽然，当我点击它，键盘出现了一瞬间，然后模式重置到原始状态。如果我删除StatefulBuilder并将GestureDetector保留为主要小部件，则一切都按预期工作(键盘出现，模态移动以显示它，等等)。

是否有办法使StatefulBuilder和TextField共存?下面是一段代码片段，为了解决这个问题而适当地删减了。

TextEditingController feedbackTextFieldController = TextEditingController();
...
showModalBottomSheet<void>(
context: context,
isScrollControlled: true, // makes content maxHeight = full device height
builder: (BuildContext context) {
bool _isFeedbackLoading = false;
return StatefulBuilder(
builder: (context, setState) => GestureDetector(
onTap: () {
// the following is needed to dismiss the keyboard on tap outside of it
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
child: AnimatedPadding(
// to make the modal move when the keyboard is shown
padding: MediaQuery.of(context).viewInsets,
duration: const Duration(milliseconds: 100),
curve: Curves.decelerate,
child: Container(
child: _isFeedbackLoading
? Center(
child: CircularProgressIndicator(),
)
: TextField(
controller: feedbackTextFieldController,
textInputAction: TextInputAction.done,
textCapitalization: TextCapitalization.sentences,
maxLines: 2,
style: ...,
decoration: ...,
),
),
),
),
);
},
);

谢谢!

Answer 1

你可以试试下面的代码

showModalBottomSheet<void>(
context: context,
isScrollControlled: true, // makes content maxHeight = full device height
builder: (BuildContext context) {
bool _isFeedbackLoading = false;
return StatefulBuilder(
// it could also because of you may reaching the wrong context
// builder: (context, setState) => GestureDetector(
builder: (_, setState) => GestureDetector(
// may be you are not able to tap
behavior: HitTestBehavior.opaque,
onTap: () {
// the following is needed to dismiss the keyboard on tap outside of it
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
child: AnimatedPadding(
// to make the modal move when the keyboard is shown
padding: MediaQuery.of(context).viewInsets,
duration: const Duration(milliseconds: 100),
curve: Curves.decelerate,
child: Container(
child: _isFeedbackLoading
? Center(
child: CircularProgressIndicator(),
)
: TextField(
controller: feedbackTextFieldController,
textInputAction: TextInputAction.done,
textCapitalization: TextCapitalization.sentences,
maxLines: 2,
style: ...,
decoration: ...,
),
),
),
),
);
},
);

或者你可以试着为这个设置另一个StatefulWidget，就像下面的

showModalBottomSheet<void>(
context: context,
isScrollControlled: true, // makes content maxHeight = full device height
builder: (BuildContext context) {
return YourRefactoredStatefulWidget();
}
.....