Flutter 键盘自动从ListView.Builder的文本字段中消失
我正在尝试实现一个解决方案,其中ListView.Builder中的一行(同时包含一个TextField和一个Text)自动用于从Web服务器检索到的每个记录。 然而,当我想开始在这样一个文本字段中输入时,键盘会出现并立即消失。 这是我屏幕上的代码Flutter 键盘自动从ListView.Builder的文本字段中消失,flutter,listview,textfield,bloc,Flutter,Listview,Textfield,Bloc,我正在尝试实现一个解决方案,其中ListView.Builder中的一行(同时包含一个TextField和一个Text)自动用于从Web服务器检索到的每个记录。 然而,当我想开始在这样一个文本字段中输入时,键盘会出现并立即消失。 这是我屏幕上的代码 class GameScreen extends StatelessWidget { static const RouteName = "/GameScreen"; @override Widget build(B
class GameScreen extends StatelessWidget {
static const RouteName = "/GameScreen";
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
const horizontalMargin = 20.0;
return Scaffold(
appBar: getAppBar(),
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Background(),
Column(
children: <Widget>[
Header("Starting letter: B"),
Expanded(
child: ListBlocProvider(
listWidget: GameCategoriesList(),
itemsService: CategoriesService(),
margin: EdgeInsets.only(
left: horizontalMargin,
bottom: 10,
right: horizontalMargin,
),
),
),
SizedBox(
height: 20,
),
SizedBox(
width: size.width - 40,
height: 60,
child: Container(
height: 60,
child: TextButtonWidget(
() {
// Navigator.of(context).pushNamed(GameScreen.RouteName);
},
"Stop game",
),
),
),
SizedBox(
height: 20,
)
],
),
],
),
);
这是我名单上的代码:
class GameCategoriesList extends ListWidget {
@override
_GameCategoriesListState createState() => _GameCategoriesListState();
}
class _GameCategoriesListState extends State<GameCategoriesList> {
@override
Widget build(BuildContext context) {
return BlocBuilder<ItemsBloc, ItemsState>(
builder: (context, state) {
if (state is ItemsFailure) {
return Center(
child: Text('failed to fetch categories'),
);
}
if (state is ItemsSuccess) {
if (state.items.isEmpty) {
return Center(
child: Text('no categories found.'),
);
}
return ListView.builder(
itemBuilder: (BuildContext context, int index) {
var textEditingController = TextEditingController();
return GameCategoryItemWidget(
key: UniqueKey(),
categoryModel: state.items[index],
textEditingController: textEditingController,
);
},
itemCount: state.items.length,
);
}
return Center(
child: LoadingIndicator(),
);
},
);
}
}
class GameCategoriesList扩展了ListWidget{
@凌驾
_GameCategoriesListState createState()=>\u GameCategoriesListState();
}
类_GameCategoriesListState扩展状态{
@凌驾
小部件构建(构建上下文){
返回BlocBuilder(
生成器:(上下文、状态){
如果(状态为ItemsFailure){
返回中心(
子项:文本('未能获取类别'),
);
}
如果(状态为ItemsAccess){
if(state.items.isEmpty){
返回中心(
子项:文本('未找到类别'),
);
}
返回ListView.builder(
itemBuilder:(构建上下文,int索引){
var textEditingController=textEditingController();
返回GameCategoryItemWidget(
键:UniqueKey(),
categoryModel:state.items[索引],
textEditingController:textEditingController,
);
},
itemCount:state.items.length,
);
}
返回中心(
子项:LoadingIndicator(),
);
},
);
}
}
这是构建文本字段和文本的代码:
class GameCategoryItemWidget extends StatefulWidget {
final CategoryModel categoryModel;
final TextEditingController textEditingController;
const GameCategoryItemWidget({Key key, this.categoryModel, this.textEditingController}) :
super(key: key);
@override
_GameCategoryItemWidgetState createState() => _GameCategoryItemWidgetState();
}
class _GameCategoryItemWidgetState extends State<GameCategoryItemWidget> {
var formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Container(
child: Form(
key: this.formKey,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10, top: 20, bottom: 10),
child: Text(
this.widget.categoryModel.name,
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
Container(
color: Colors.white,
child: InputField(
InputDecoration(labelText: this.widget.categoryModel.name),
this.widget.textEditingController,
false,
),
),
],
),
),
);
}
@override
void dispose() {
this.widget.textEditingController.dispose();
super.dispose();
}
}
class GameCategoryItemWidget扩展了StatefulWidget{
最终分类模型分类模型;
最终文本编辑控制器文本编辑控制器;
const GameCategoryItemWidget({Key Key,this.categoryModel,this.textEditingController}):
超级(键:键);
@凌驾
_GameCategoryItemWidgetState createState()=>\u GameCategoryItemWidgetState();
}
类_GameCategoryItemWidgetState扩展状态{
var formKey=GlobalKey();
@凌驾
小部件构建(构建上下文){
返回容器(
孩子:表格(
key:this.formKey,
子:列(
儿童:[
容器(
填充:仅限边缘设置(左:10,顶部:20,底部:10),
子:文本(
this.widget.categoryModel.name,
样式:TextStyle(
颜色:颜色,白色,
尺码:18,
),
),
),
容器(
颜色:颜色,白色,
子项:输入字段(
InputDecoration(labelText:this.widget.categoryModel.name),
this.widget.textEditingController,
假,,
),
),
],
),
),
);
}
@凌驾
无效处置(){
this.widget.textEditingController.dispose();
super.dispose();
}
}
InputField是一个自定义小部件,用于隐藏TextField的材质和Cupertino版本之间的切换
我已经尝试从自定义TextField小部件中删除密钥。有趣的是,输入实际上正在工作,但是它无法确定ListView中哪个文本字段的输入是确定的,所以它将输入添加到所有文本字段中。我也尝试过将无状态小部件转换成状态,但这也没有帮助
整个生成基于:
希望你们能帮我
class GameCategoryItemWidget extends StatefulWidget {
final CategoryModel categoryModel;
final TextEditingController textEditingController;
const GameCategoryItemWidget({Key key, this.categoryModel, this.textEditingController}) :
super(key: key);
@override
_GameCategoryItemWidgetState createState() => _GameCategoryItemWidgetState();
}
class _GameCategoryItemWidgetState extends State<GameCategoryItemWidget> {
var formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Container(
child: Form(
key: this.formKey,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10, top: 20, bottom: 10),
child: Text(
this.widget.categoryModel.name,
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
Container(
color: Colors.white,
child: InputField(
InputDecoration(labelText: this.widget.categoryModel.name),
this.widget.textEditingController,
false,
),
),
],
),
),
);
}
@override
void dispose() {
this.widget.textEditingController.dispose();
super.dispose();
}
}