如何防止 Flutter 裁剪 BoxDecoration 阴影？

Question

这是一个简单的 flutter 应用程序的屏幕截图：

按下 ++/-- 按钮可在 Container 中添加/删除面板。 容器用蓝色阴影勾勒出轮廓。 现在，一旦容器变得太靠近底部边框，它的阴影就会在左右边框上被剪裁。

你有什么想法是什么导致剪辑以及如何避免它？

这是代码的样子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ScrollController _scrollController;

  @override
  void initState() {
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      if (_counter > 0) {
        _counter--;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: ListView(
          controller: _scrollController,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                SizedBox(height: 30),
                _getButtonPanel(),
                SizedBox(height: 20),
                Container(
                  padding: EdgeInsets.all(20),
                  child: _getChildren(_counter),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.blue,
                        offset: Offset(0, 0),
                        blurRadius: 10.0,
                        spreadRadius: 5.0,
                      )
                    ],
                  ),
                ),
                SizedBox(height: 20),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _getButtonPanel() {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        OutlineButton(
          onPressed: _decrementCounter,
          child: Text('--'),
        ),
        Spacer(),
        OutlineButton(
          onPressed: _incrementCounter,
          child: Text('++'),
        ),
      ],
    );
  }

  Widget _getChildren(int cnt) {
    List<Widget> children = [];
    for (int i = 0; i < cnt; i++) {
      children.add(_getItem(1 + i));
    }

    return Column(
      children: children,
    );
  }

  Widget _getItem(int i) {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 50,
        ),
        Text('Child panel $i'),
        SizedBox(
          height: 50,
        ),
      ],
    );
  }
}

Answer 1

您应该向包含列表的容器添加边距以防止其被剪裁。

    Container(
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(15), //Add margin
      child: _getChildren(_counter),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(20)),
        boxShadow: [
          BoxShadow(
            color: Colors.blue,
            offset: Offset(0, 0),
            blurRadius: 10.0,
            spreadRadius: 5.0,
          )
        ],
      ),
    );