Flutter:无法使用显示的滚动条创建可水平滚动的主体

Posted

技术标签:

【中文标题】Flutter:无法使用显示的滚动条创建可水平滚动的主体【英文标题】:Flutter: cannot create horizontally scrollable body with shown scroll bar 【发布时间】:2022-01-15 15:01:07 【问题描述】:

我需要帮助来创建可滚动的正文: my screen

这就是我的身体结构:build()

              body: Padding(
                  padding: const EdgeInsets.all(30.0),
                  child: DragAndDropLists(
                    children: _contents,
                    onItemReorder: _onItemReorder,
                    onListReorder: _onListReorder,
                    axis: Axis.horizontal,
                    listWidth: 300,
                    listDraggingWidth: 300,
                    listPadding: EdgeInsets.all(20.0),
                    itemDivider: const Divider(
                      thickness: 4,
                      height: 10,
                      color: lightBlue,
                    ),
                    itemDecorationWhileDragging: BoxDecoration(
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                          color: const Color(0xff004269).withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 3,
                          offset: const Offset(0, 0), // changes position of shadow
                        ),
                      ],
                    ),
                    listInnerDecoration: BoxDecoration(
                      color: Theme.of(context).canvasColor,
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    lastItemTargetHeight: 2,
                    addLastItemTargetHeightToTop: true,
                    lastListTargetSize: 40,
                    
                  ),
                ),

我已经尝试过 ListView、SingleChildScrollView、Column 我不知道为什么,但它不起作用

也许有人知道我可以改变什么来查看滚动条并可以水平滚动它 谢谢

【问题讨论】:

SingleChildScrollView(scrollDirection:Axis.horizo​​ntal), 【参考方案1】:

您似乎使用了一些复杂的布局,但简化版本看起来像这样:

您可以将ListViewscrollDirection 属性设置为Axis.horizontal,对于滚动条,您可以将ListView 包裹在Scrollbar 内。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  MyApp(Key? key) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  final ScrollController _scrollController = ScrollController();

  final List<int> _items = List<int>.generate(100, (int index) => index);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        home: Scaffold(
      body: SizedBox(
        height: 150,
        child: Scrollbar(
          isAlwaysShown: true,
          controller: _scrollController,
          child: ReorderableListView.builder(
            scrollDirection: Axis.horizontal,
            scrollController: _scrollController,
            itemBuilder: buildItem,
            itemCount: _items.length,
            onReorder: (int oldIndex, int newIndex) 
              setState(() 
                if (oldIndex < newIndex) 
                  newIndex -= 1;
                
                final int item = _items.removeAt(oldIndex);
                _items.insert(newIndex, item);
              );
            ,
          ),
        ),
      ),
    ));
  

  Widget buildItem(context, index) 
    return Container(
      key: Key('$index'),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.green[200],
      ),
      margin: const EdgeInsets.all(8.0),
      height: 100,
      width: 100,
      child: Center(child: Text('$_items[index]')),
    );
  



忽略手柄,它们只出现在桌面上,拖放在移动设备上工作。

【讨论】:

它不适用于 DragAndDropLists,这一直是我的问题 @Katherine 听起来像是包问题。您可以使用 ReorderableListView 代替拖放列表,它是 Flutter 框架的一部分。更新了我的答案。【参考方案2】:

尝试使用SingleChildScrollViewPadding 包装在您的Scaffold

 SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Padding(),
 )

您可以使用的其他选项是GridViewListView

【讨论】:

以上是关于Flutter:无法使用显示的滚动条创建可水平滚动的主体的主要内容,如果未能解决你的问题,请参考以下文章

向 HTML 表格添加水平滚动条

如何启用垂直滚动的滚动条并禁用水平滚动?

如何在没有滚动条的 Tailwind 中创建可滚动元素

过滤后如何在剑道 ui 网格上显示水平滚动条?

word 中水平滚动条与垂直滚动条怎样设置与取消??

java中JScrollPane不显示水平滚动条的解决办法