Question

让我们快速浏览以下两个屏幕截图：

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

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

Answer 2

如果您不想创建自己的Sliver，则可以使用一个软件包来帮助您

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

然后在CustomScrollView条中使用它

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
 )

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

2 个答案: