钩子只能从混合了“钩子”的小部件的构建方法中调用

Question

我想使用模式，我想使用 MultilineTextField 但是当我使用它时，dart 抛出错误。 你知道如何解决这个问题吗？ Hooks can only be called from the build method of a widget that mix-in .

Future modalWithReason(BuildContext context) {
  return showModalBottomSheet(
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Container(
            height: 789.sp,
            padding: EdgeInsets.symmetric(horizontal: 16.sp),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: Column(
              children: [
                        Container(
                          height: 264.h,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(height: 34.h),
                              Text(
                                '理由を記述',
                                style: bodySemiBold(black),
                              ),
                              SizedBox(height: 20.h),
                              MultilineTextField(),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      });
}

我想用这个。

class MultilineTextField extends HookWidget {
  MultilineTextFieldForReason({super.key});

  final myController = useTextEditingController();
  @override
  Widget build(BuildContext context) {
    return TextField(
      keyboardType: TextInputType.multiline,
      controller: myController,
      maxLines: 4,
      decoration: InputDecoration(
          border: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1,
          color: borderMidEmphasis,
        ),
      )),
    );
  }
}

Answer 1

class MultilineTextField extends HookWidget {
  MultilineTextField({super.key});


  @override
  Widget build(BuildContext context) {
    final myController = useTextEditingController();
    return TextField(
      keyboardType: TextInputType.multiline,
      controller: myController,
      maxLines: 4,
      decoration: InputDecoration(
          border: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1,
          color: borderMidEmphasis,
        ),
      )),
    );
  }
}

发生此错误是因为您在构建方法之外使用useTextEditingController挂钩。 要解决此问题，请在构建方法中放置 controller 挂钩初始化。