【问题标题】:How to fix cropped shadow in a AnimatedList?如何修复 AnimatedList 中的裁剪阴影?
【发布时间】:2019-06-11 11:58:42
【问题描述】:

我使用 AnimatedList 但在项目中使用了阴影,我的项目如下面的代码,我需要一些帮助!!!

class TextSentMessage extends StatelessWidget {
  final String textMessage;
  final Widget buildStatus;

  TextSentMessage({this.textMessage, this.buildStatus});

  @override
  Widget build(BuildContext context) {
    print('message 4 : ' + textMessage);
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Container(
                padding: EdgeInsets.only(
                    top: 10.0, bottom: 10.0, left: 20.0, right: 15.0),
                margin: EdgeInsets.all(5.0),
                constraints: BoxConstraints(
                    maxWidth: 0.7 * MediaQuery.of(context).size.width,
                    minWidth: 50.0),
                decoration: BoxDecoration(
                  color: Color.fromARGB(255, 0, 117, 255),
                  boxShadow: [
                    BoxShadow(
                        color: black_7, blurRadius: 64, offset: Offset(0, 7))
                  ],
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                      bottomRight: Radius.circular(6),
                      bottomLeft: Radius.circular(20)),
                ),
                child: Text(textMessage,
                    textAlign: TextAlign.right,
                    style: TextStyle(
                        fontFamily: 'UTM Avo',
                        fontSize: 15.0,
                        color: Colors.white))),
          ],
        ),
        buildStatus
      ],
    );
  }
}

这是我使用 ListView.builder :https://i.imgur.com/4LVXOOw.jpg

这是我使用的 AnimatedList :https://i.imgur.com/bQ3ocL1.jpg

【问题讨论】:

    标签: flutter flutter-layout flutter-animation


    【解决方案1】:

    我无法复制您的问题@quyen。

    这是我在iOS模拟器&flutter 1.5.4-hotfix.2(稳定通道)上做的测试:

    动画列表: 孩子:动画列表( 初始项计数:msgs.length, 项目建造者: (BuildContext ctx, int index, Animation 动画) { 返回文本发送消息( 构建状态:图标( Icons.check_circle, 尺寸:18, 颜色:Color.fromARGB(255, 0, 117, 255), ), 文本消息:消息[索引], ); }, ),

    动画演示图片:

    列表视图构建器:

    child: ListView.builder(
              itemBuilder: (ctx, index) {
                return TextSentMessage(
                  buildStatus: Icon(
                    Icons.check_circle,
                    size: 18,
                    color: Colors.green,
                  ),
                  textMessage: 'This is a text message!',
                );
              },
              itemCount: 6,
              scrollDirection: Axis.vertical,
            ),
    

    列表视图演示图片:

    【讨论】:

    • 谢谢!我发现了我的问题,我在添加项目时扭曲了 SizeTransition 以使用动画,即裁剪我的阴影,您可以尝试扭曲它并为我查看@roipeker
    猜你喜欢
    • 2019-08-14
    • 2013-07-12
    • 2012-11-08
    • 2022-10-07
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多