Question

我正在尝试实现一个解决方案，其中对于从Web服务器检索到的每条记录，ListView.Builder中的行（包含TextField和Text）都将自动生成。但是，当我要开始在此类TextField中键入内容时，键盘就会出现，并立即消失。这是我的屏幕代码。

    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,
          )
        ],
      ),
    ],
  ),
);

} }

这是我的ListBlocProvider的代码：

class ListBlocProvider extends StatelessWidget {
final ListWidget listWidget;
final ItemsService itemsService;
final bool useColor;
final bool usePaddingTop;
final double height;
final EdgeInsets margin;

const ListBlocProvider({
  @required this.listWidget,
 @required this.itemsService,
this.useColor = true,
this.usePaddingTop = true,
this.height = 200,
this.margin,
});

@override
Widget build(BuildContext context) {
const horizontalMargin = 20.0;

return BlocProvider(
  create: (context) => ItemsBloc(itemsService: itemsService)..add(ItemsFetched()),
  child: Container(
    padding: usePaddingTop ? EdgeInsets.only(top: 10) : null,
    decoration: BoxDecoration(
      color: this.useColor ? Color.fromRGBO(10, 50, 75, 0.9) : null,
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10),
      ),
    ),
    margin: this.margin,
    height: this.height,
    child: this.listWidget,
   ),
   );
  }
 }

这是我的列表的代码：

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(),
    );
    },
    );
    }
    }

这是构建TextField和Text的代码：

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();
  }
   }

InputField是一个自定义小部件，用于隐藏TextField的Material版本和Cupertino版本之间的切换。

我已经尝试从自定义TextField小部件中删除键。有趣的是，输入实际上正在工作，但是无法确定输入是针对ListView中的哪个TextField确定的，因此会将输入添加到所有输入中。我还尝试过将无状态小部件设为Statefull来进行交换，但这也无济于事。

整个构建基于：https://bloclibrary.dev/#/flutterinfinitelisttutorial。

希望你们能帮助我。

键盘会自动从ListView.Builder中的TextField中消失

0 个答案: