FLUTTER 滚动多个小部件

Posted 2023-02-23

【中文标题】FLUTTER 滚动多个小部件

【英文标题】：FLUTTER scroll multiple widget

【发布时间】：2019-07-16 02:52:46

【问题描述】：

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

因为我将Stacking 他们在彼此之上， 所以一个被另一个的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。

请指教。

【问题讨论】：

发布您的代码，以便人们可以帮助您

@farhana 嘿，我添加了一些代码。这有帮助吗？

嘿，你为什么要使用stack，你应该使用Row 小部件来让你的列保持左或右可刮擦

@farhana 但随后我将滚动整个Row。如果滚动条位于不同的Row 或Column 中，作为它们的children 之一怎么办？

据我了解，您的左右两列都是可滚动的。

【参考方案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'),
                ],
              )
            ]),
          ]),
        ));
  

【讨论】：

嘿！感谢您的回答。我不认为这就是我要找的。在您的示例中，整个堆栈都在移动。我想要的是，作为一个单独的列表，它们可以一起滚动，即使它们没有放在一起。这样我可以在方便的地方以任何我想要的方式放置这些列表，但仍然可以一起滚动，因为它们会共享信息。

【参考方案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),

  ],
  ),
 ),