Flutter Web 中如何使列可滚动？

Posted 2023-02-23

【中文标题】Flutter Web 中如何使列可滚动？

【英文标题】：How To Make The Column Scrollable In Flutter Web?

【发布时间】：2021-06-08 07:40:08

【问题描述】：

父小部件是列， 列包含以下子项：

堆栈 容器（儿童：行） 行（儿童：[GESTUREDETECTOR(child:Container)，GESTUREDETECTOR(child:Container)] 列表视图生成器

先用展开后的列包装，然后用 singlechildScrollView 包装。结果就是报错！！

怎么办？

【参考方案1】：

用SinglechildScrollView包裹Column，对于ListView.builder你需要设置：

    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,

在您的情况下，小部件树将如下所示（最小可重复样本）

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'SingleChildScrollView',
      home: Scaffold(
          appBar: AppBar(
            title: Text('SingleChildScrollView Example'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Stack(
                  children: [
                    Container(
                      width: 50,
                      height: 50,
                      color: Colors.cyan,
                    ),
                  ],
                ),
                Container(
                  child: Row(
                    children: [
                      GestureDetector(
                        child: Container(
                          width: 50,
                          height: 50,
                          color: Colors.green,
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          width: 50,
                          height: 50,
                          color: Colors.blue,
                        ),
                      ),
                    ],
                  ),
                ),
                ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: 60,
                  itemBuilder: (context, index) => Text('Item # $index'),
                )
              ],
            ),
          )),
    );
  

它会滚动。

【讨论】：

我听不懂？该列有子 lisview.builder。整个小部件集都是 Column 的子级。列是父小部件。我想让父列可滚动。