如何使flutter应用程序水平和垂直滚动

Question

我很难让flutter屏幕水平和垂直滚动。我可以让它在一个方向上工作，但当我在两个方向上尝试时都失败了。

这是一个模拟应用程序。作为背景，我的目标是网络，那里的信息应该可以通过键盘和amp；鼠标，即使它在直接查看区域之外。

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
scrollDirection: Axis.horizontal,
children: [
ListView(
scrollDirection: Axis.vertical,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: [
for (var i = 0; i < 4; i++)
Container(
child: Text('Header $i'),
width: 300,
height: 100,
color: Colors.greenAccent,
margin: const EdgeInsets.all(20)),
],
),
...[
for (var i = 0; i < 50; i++)
Container(
child: Text('Column $i'),
width: 150,
height: 50,
color: Colors.orange,
margin: const EdgeInsets.all(10),
)
],
],
)
],
)
],
),
);
}
}

感谢您对如何实现这一目标提出的任何建议！

Tony

Answer 1

您可以使用以下代码段(在使用Flutter 3.0.1的Linux应用程序上测试并确认可用(在Flutter中使任何视图都可以垂直和水平滚动：

SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: <widget-to-be-scrollable-both-vertically-and-horizontally>,
),
)

Answer 2

也许您可以尝试InteractiveViewer小部件和Table小部件

InteractiveViewer颤振官方示例：https://github.com/flutter/gallery/blob/master/lib/demos/reference/transformations_demo.dart

Answer 3

仍然不是我想要的，但它更接近，可能已经足够好了。

我添加了一个滚动控制器。

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late ScrollController _scrollControllerH;
@override
void initState() {
_scrollControllerH = ScrollController();
super.initState();
}
@override
void dispose() {
_scrollControllerH.dispose();
super.dispose();
}
/// scroll only the header independent of the table
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
scrollDirection: Axis.vertical,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Scrollbar(
controller: _scrollControllerH,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: _scrollControllerH,
child: Row(
children: [
for (var i = 0; i < 4; i++)
Container(
child: Text('Header $i'),
width: 300,
height: 100,
color: Colors.greenAccent,
margin: const EdgeInsets.all(20)),
],
),
),
),
...[
for (var i = 0; i < 50; i++)
Container(
child: Text('Column $i'),
width: 150,
height: 50,
color: Colors.orange,
margin: const EdgeInsets.all(10),
)
],
],
)
],
));
}
}