2

如果我有两个（或更多）可滚动的小部件（例如，SingleChildScrollView），我如何让它们同时滚动？

因为我会把Stack它们放在一起，所以一个被另一个覆盖Container。

我很新，所以我现在没有太多选择。我试过ScrollController但它不工作。我不知道如何在我的代码中正确实现它。

另外，如果可能，请附上一个简单的代码示例。

这是我尝试过的：

class _MyHomePageState extends State<MyHomePage> {

  final ScrollController _mycontroller = new ScrollController();


  @override
  Widget build(BuildContext context) {
    body:
      Container(
        height: 100,
        child:
          Stack( children: <Widget>[
            SingleChildScrollView(
              controller: _mycontroller,
              child: Column( children: <Widget>[
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
              ],)
            ),
            SingleChildScrollView(
              controller: _mycontroller,
              child: Column(children: <Widget>[
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
              ],)
            ),
          ])
      )
  }
}

如果我滚动其中一个，我希望两者一起滚动。但是即使它们具有相同的 ，它们仍然可以独立滚动controller。我不确定我controller是否正确使用。

请指教。

4

2 回答 2

3 
Try This code both the Column Scroll at same time use can use only one controller to scroll the Both Column.

  class _ConfirmEmailState extends State<ConfirmEmail> {

  final ScrollController _mycontroller = new ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("hello"),
        ),
        body: Container(
          height: 100,
          child: ListView(children: <Widget>[
            Stack(children: <Widget>[
              SingleChildScrollView(
                  controller: _mycontroller,
                  child: Column(
                    children: <Widget>[
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                      Text('LEFT            '),
                    ],
                  )),
              Column(
                children: <Widget>[
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                  Text('          RIGHT'),
                ],
              )
            ]),
          ]),
        ));
  }
}
于 2019-02-22T07:27:04.533 回答
1

在 Flutter 中有 11 种不同类型的小部件可用于实现不同任务的滚动功能。要创建一个简单的垂直 ScrollView，它可以包含具有不同行为的不同类型的小部件，我们将使用 SingleChildScrollView 小部件。这个小部件可以在其中显示多个小部件。

  1. 在小部件构建区域中创建脚手架小部件 -> 安全区域小部件
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
        body: SafeArea(
          child: 
        )
       )
      );
   }
 }
  1. 在 Safe Area 小部件中创建 SingleChildScrollView 小部件。现在我们将在 SingleChildScrollView 中创建一个 Column 小部件，并将我们所有的多个小部件放入 Column 小部件中。我们正在 SingleChildScrollView 中创建多个容器小部件和图像小部件。一切都将在这里轻松滚动。
SingleChildScrollView(
  child: Column(
  children: <Widget>[

    Container(
      color: Colors.green, // Yellow
      height: 120.0,
    ),

    Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
       width: 300, height: 200, fit: BoxFit.contain),

    Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png',
       width: 200, fit: BoxFit.contain),

    Container(
      color: Colors.pink, // Yellow
      height: 120.0,
    ),

    Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)),

    Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)),

    Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)),

    Container(
      color: Colors.redAccent, // Yellow
      height: 120.0,
    ),

    Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
       width: 300, height: 200, fit: BoxFit.contain),

  ],
  ),
 ),
于 2020-02-18T10:43:32.030 回答