【问题标题】:The shadow of the child elements changes position within a wrap in flutter子元素的阴影在颤动中改变了包装内的位置
【发布时间】:2020-11-23 08:49:18
【问题描述】:

我对 Wrap 的子项的阴影有疑问。

我已经设法快速重新创建它。

显然,滚动的次数越多,底部的阴影就会消失,并开始出现在每个项目的顶部,产生一种有点奇怪的效果。

子项的阴影如何保持在正确的位置?

在列表的底部,我又添加了几个按钮(但总是在 Wrap 之外),并且阴影投射正确。

编辑: 我添加示例代码以重新创建错误

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({@required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Container(
          height: double.infinity,
          width: double.infinity,
          alignment: Alignment.center,
          child: ListView(
            children:[
                  new LayoutBuilder(
                      builder: (BuildContext context, BoxConstraints constraints) {
                        List<Widget> _list = List();
                        int _number_items = 30;
                        for(int a = 0; a < _number_items; a++){
                          _list.add(
                              Card(
                                elevation: 4,
                                child: Container(
                                  margin: EdgeInsets.all(10),
                                  width: 200,
                                  height: 200,
                                ),
                              )
                          );
                        }
                        for(int a = 0; a < _number_items; a++){
                          _list.add(
                              Container(
                                width: 400,
                                child: RaisedButton(
                                  onPressed: () {},
                                  child: Text(
                                    "Button in the Wrap ",
                                    style: TextStyle(color: colors.white),
                                  ),
                                  color: Colors.red,
                                ),
                              )
                          );
                        }
                        return Wrap(
                          children: _list,
                        );
                      }
                  ),
              RaisedButton(
                onPressed: () {},
                child: Text(
                  "Button outside the Wrap",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
              ),
              RaisedButton(
                onPressed: () {},
                child: Text(
                  "Button outside the Wrap",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
              ),
              RaisedButton(
                onPressed: () {},
                child: Text(
                  "Button outside the Wrap",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
              )
            ],
          )
      ),
    );
  }
}

例子:

【问题讨论】:

  • 您需要包含某种视觉效果以及相关的代码部分。
  • 问题中包含的屏幕录制中的阴影显然很奇怪。不过我在dartpad上试过同样的代码,上面的阴影没有问题。

标签: android iphone flutter listview shadow


【解决方案1】:

将此添加到ListView

addRepaintBoundaries: false

【讨论】:

  • 完美。这解决了这个问题。非常感谢。
猜你喜欢
  • 1970-01-01
  • 2021-07-29
  • 2013-08-14
  • 1970-01-01
  • 2020-10-10
  • 2015-11-19
  • 1970-01-01
  • 2021-05-28
  • 2022-08-19
相关资源
最近更新 更多