代码之家 › 专栏 › 技术社区 › Anandh Krishnan

SingleChildScrollView和ListView.builder scoll在Flutter中显示在错误的位置

scrollbar dart flutter

Anandh Krishnan · 技术社区 · 10 月前

的滚动条 SingleChildScrollView 出现在整个 Column ,而不仅仅是里面的内容 SingleChildScrollView 。我想完全删除滚动条,或者确保滚动条仅适用于 SingleChildScrollView 我尝试了所有的方法,但都无济于事,就连我也试着设定身高 SingleChildScrollView 烧烤架还在往下掉。请让我知道我做错了什么?

 Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: selectedPickValues!.map((pickValue) {
                return Padding(
                  padding: const EdgeInsets.only(right: 10.0),
                  child: InputChip(
                    backgroundColor: Colors.white,
                    padding: EdgeInsets.zero,
                    labelPadding: EdgeInsets.only(left: 8),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0), // Set the desired radius
                      side: BorderSide(color: UiUtils.getColor().withOpacity(0.30), width: 1.0), // Optional: add a border
                    ),
                    label: Text(CommonUtils.maxLength(pickValue.fieldvalue ?? '', 50),style: TextStyle(fontSize: 10),),
                    deleteIcon: Icon(
                      Icons.cancel,
                      color: UiUtils.getColor(),
                      size: 18.0, // Reduce the icon size as needed
                    ),
                    onDeleted: () {
                      setState(() {
                        selectedPickValues!.remove(pickValue);
                      });
                      widget.selectedFields(selectedPickValues);
                    },
                  ),
                );
              }).toList(),
            ),
          ),
          const SizedBox(height: 10,),
          SizedBox(
            height: 35,
            child: TextField(
              style: TextStyle(fontSize: 13),
              maxLines: 1,
              minLines: 1,
              enabled: true,
              onChanged: (value) {
                setState(() {
                  searchingText = value;
                });
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search,color: Colors.grey,),
                counterText: "",
                hintText: 'Search here',
                filled: true,
                hintStyle: TextStyle(color: Colors.grey,fontWeight: FontWeight.normal),
                contentPadding: EdgeInsets.only(left: 8),
                fillColor: Colors.white70,
                enabledBorder: UiUtils.searchBorder(),
                disabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                  borderSide: BorderSide(color: Colors.grey, width: 0.5),
                ),
                focusedBorder: UiUtils.searchBorder(),
              ),
            ),
          ),
          SizedBox(height: 10),
          Container(
            constraints: BoxConstraints(maxHeight: 360),
            child: Column(
              children: [
                Wrap(
                  children: fieldValues!.pickvalues!.map((pickValues) {
                    bool userMatches = searchingText.isEmpty || pickValues.fieldvalue!.toLowerCase().contains(searchingText.toLowerCase());
                    if (searchingText.isNotEmpty && !userMatches) {
                      return SizedBox();
                    }

                    String fieldValue = pickValues.fieldvalue ?? '';
                    int id = pickValues.id ?? 0;
                    bool isSelected = selectedPickValues!.any((pickValue) => pickValue.id == id);

                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 4.0),
                      child: ChoiceChip(
                        selectedColor: UiUtils.getColor(),
                        backgroundColor: Colors.white,
                        showCheckmark: false,
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: isSelected ? Colors.white : Colors.grey),
                            borderRadius: BorderRadius.all(Radius.circular(26))),
                        label: Text(fieldValue,style: TextStyle(color: isSelected ? Colors.white : null),),
                        selected: isSelected,
                        onSelected: (selected) {
                          setState(() {
                            if (selected) {
                              selectedPickValues!.add(pickValues);
                            } else {
                              selectedPickValues!.remove(pickValues);
                            }
                            widget.selectedFields(selectedPickValues);
                          });
                        },
                      ),
                    );
                  }).toList(),
                ),
              ],
            ),
          ),
        ],
      ),

我尝试了以下方法来删除滚动条,但无济于事

 ScrollConfiguration(
                  behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
                  child: ...,),

尝试添加

 Scrollbar(
          thickness: 0,
          child: ...
 )

还有

NotificationListener<ScrollNotification>(
                onNotification: (_) => true,
                child: ListView(....)
           )

1 回复 | 直到 10 月前

Ravindra S. Patil 10 月前

试试下面的代码,希望对你有所帮助。

变量:

int? _value = 1;
int? _value1 = 0;

Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      SizedBox(height: 20),
      SizedBox(
        height: 40,
        child: ListView.builder(
          itemCount: 20,
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 5),
              child: ChoiceChip(
                label: Text('Item $index'),
                selected: _value == index,
                onSelected: (bool selected) {
                  setState(() {
                    _value = selected ? index : null;
                  });
                },
              ),
            );
          },
        ),
      ),
      SizedBox(height: 20),
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          prefixIcon: Icon(Icons.search),
          hintStyle: TextStyle(color: Colors.grey[800]),
          hintText: "Search",
          fillColor: Colors.white70,
        ),
      ),
      SizedBox(height: 20),
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Wrap(
                spacing: 5.0,
                children: List<Widget>.generate(
                  30,
                  (int index) {
                    return ChoiceChip(
                      label: Text('Item $index'),
                      selected: _value1 == index,
                      onSelected: (bool selected) {
                        setState(() {
                          _value1 = selected ? index : null;
                        });
                      },
                    );
                  },
                ).toList(),
              ),
              SizedBox(height: 20),
              Container(
                height: 100,
                color: Colors.green,
              ),
              SizedBox(height: 20),
              Container(
                height: 200,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

结果->