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.horizontal), 【参考方案1】:您似乎使用了一些复杂的布局,但简化版本看起来像这样:
您可以将ListView
的scrollDirection
属性设置为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】:
尝试使用SingleChildScrollView
将Padding
包装在您的Scaffold
中
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Padding(),
)
您可以使用的其他选项是GridView
和ListView
。
【讨论】:
以上是关于Flutter:无法使用显示的滚动条创建可水平滚动的主体的主要内容,如果未能解决你的问题,请参考以下文章