Flutter：如何滚动容器而不是其内容？答案

【问题标题】：Flutter: How to scroll a container rather than its content?Flutter：如何滚动容器而不是其内容？
【发布时间】：2020-07-07 20:12:54
【问题描述】：

让我们快速看一下这两张截图：

左侧屏幕截图显示了一个框（装饰容器），其中包含一个处理滚动的 CustomScrollView。这个很容易完成并且效果很好。
右侧的屏幕截图显示了预期的行为，即滚动框本身而不是其内容。问题是，盒子超出了屏幕边界，导致溢出错误消息。你有什么想法可以实现吗？
谢谢。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以将Container 包装在SingleChildScrollView 中以获得所需的结果。只需将所有应该在Container 中的元素放在Column 中Container 中。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Container Scroll'),
          ),
          body: SingleChildScrollView(
            child: Center(
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 30),
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black54,
                        blurRadius: 10.0,
                        offset: Offset(0.0, 0.75))
                  ],
                ),
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.red,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.green,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.blue,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.orange,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.pink,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.purple,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.teal,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.black,
                    ),
                    Container(
                      height: 200,
                      width: 250,
                      color: Colors.indigo,
                    ),
                  ],
                ),
              ),
            ),
          )),
    );
  }
}

【讨论】：

【解决方案2】：

如果您不想创建自己的 Sliver，有一个包可以帮助您完成此操作

dependencies:
  flutter:
    sdk: flutter
  flutter_group_sliver: ^0.0.2
  ...

然后在 CustomScrollView slivers 中使用它

import 'package:flutter_group_sliver/flutter_group_sliver.dart';

SliverGroupBuilder(
    margin: EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 5,
          blurRadius: 7,
        ),
      ],
    ),
    child: SliverList(...) // Your SliverList with ListTiles here
 )

【讨论】：