Question

如果我有两个（或更多）可滚动小部件（例如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。

请告知。

Answer 1

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'),
                ],
              )
            ]),
          ]),
        ));
  }
}

Answer 2

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

创建脚手架小部件->小部件构建区域中的“安全区域”小部件

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
        body: SafeArea(
          child: 
        )
       )
      );
   }
 }

在“安全区域”小部件中创建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),

  ],
  ),
 ),

FLUTTER滚动多个小部件

2 个答案: