Question

我正在尝试将可拖动的滚动条放在我的颤抖Form上，以便网络用户可以单击并拖动到屏幕底部。抖动Scrollbar类适用于触摸屏设备，不适用于鼠标！

我尝试使用draggable_scrollbar，但是它仅接受ListView作为孩子。

这是我当前的代码结构：

    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('My form'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Scrollbar(
            child: SingleChildScrollView(
              child: Form(...),
            ),
          ),
        ),
      );
    }

Answer 1

在可拖动滚动栏中，您可以尝试仅将ListView.builder与表单一起使用，如下所示。

Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('My form'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Scrollbar(
            child: SingleChildScrollView(
              child: DraggableScrollbar.rrect(
                controller: myScrollController,
                child: ListView.builder(
                  controller: myScrollController,
                  itemCount: 1,
                  itemBuilder: (context, index) {
                    return Form();
                  },
                ),
              ),
            ),
          ),
        ),
      );
    }

Answer 2

使用您已经尝试过的draggable_scrollbar可以实现。这个想法不是用它包装Form小部件，而是包装它的子项widget，因为Form期望有一个子项，所以它可以是一个列表。这是此实时dart-pad中可用的工作示例。

核心思想如下。

照常创建表单小部件。
与其创建Column之类的TextFormField表单内容，而不是将其子元素包装在ListView小部件中，而是将其子元素作为表单字段。
根据您选择的ScrollController的要求创建一个DraggableScrollBar.xyz，并将其传递给此_myFormScrollController。
将相同的_myFormScrollController传递给ListView的控制器参数。

这应该启用带有滚动条的可滚动表单。

        Form(
          key: _formKey,
          child: DraggableScrollbar.rrect(  
            controller: _scrollController,
            alwaysVisibleScrollThumb: true,
            child: ListView(
              controller: _scrollController,
              children: [
                ...List<Widget>.generate(15, (i) => TextFormField(
                  controller: TextEditingController()..text='Field $i',
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter some text';
                    }
                    return null;
                  },
                )),

              ],
            ),
          ),
        )

关于飞镖板的一些说明：

包含draggable_scrollbar小部件的整个源。一切归功于开发人员 。
代码不建议为每个TextEditingContorller创建一个新的TextFormField。在此示例中，它仅用于装饰目的。
核心逻辑仅在MainScreen小部件中

注意：我将可拖动滚动条代码完全复制到了dartpad中，因为目前尚无法在dartpad中导入软件包。 ?‍♂️

表单颤动上的可拖动滚动条

2 个答案: