Flutter-为什么材料标高不起作用？

9q78igpj 于 2023-06-24 发布在 Flutter

关注(0)|答案(2)|浏览(117)

柱中的材料标高不起作用。
在此代码中，标高不起作用。

Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Column(
        children: [
          Material(
            elevation: 8,
            child: Container(
              height: 50,
              color: Colors.yellowAccent,
            ),
          ),
          Container(
            height: 50,
            color: Colors.white,
          )
        ],
      ),
    );

但只是删除容器是工作。为什么？

Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Column(
        children: [
          Material(
            elevation: 8,
            child: Container(
              height: 50,
              color: Colors.yellowAccent,
            ),
          ),
        ],
      ),
    );

下一个容器。

移除下一个容器。

包括SingleChildScrollView和一些内容消息。它看起来像一个小阴影出现在背景中，但不是在内容中。
更新简单代码：

Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text('Test'),
        elevation: 0,
      ),
      body: Column(
        children: [
          Material(
            elevation: 8,
            child: Container(
              alignment: Alignment.center,
              height: 50,
              color: Colors.yellowAccent,
              child: const Text('Some title message'),
            ),
          ),
          Expanded(
              child: SingleChildScrollView(
            child: Column(
              children: [
                for (var i = 0; i < 20; i++)
                  Container(
                    alignment: Alignment.center,
                    height: 100,
                    color: Colors.white,
                    // Divider
                    margin: const EdgeInsets.only(bottom: 8),
                    child: const Text('Some content'),
                  ),
              ],
            ),
          ))
        ],
      ),
    )

flutter

来源：https://stackoverflow.com/questions/72877463/flutter-why-material-elevation-not-working

2条答案

按热度按时间

628mspwn1#

我认为你可以使用Stack而不是Column，如果你想要Material的阴影是可见的，即使你滚动列表。并在列表顶部添加透明Container。

Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text('Test'),
        elevation: 0,
      ),
      // Use stack instead of column
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
          children: [
          // Add transparent container
            Container(
             alignment: Alignment.center,
             height: 60,
             color: Colors.transparent,
            ),
            for (var i = 0; i < 20; i++)
              Container(
                alignment: Alignment.center,
                height: 100,
                color: Colors.white,
                // Divider
                margin: const EdgeInsets.only(bottom: 8),
                child: const Text('Some content'),
              ),
          ],
            ),
          ),
          Material(
            elevation: 8,
            child: Container(
              alignment: Alignment.center,
              height: 50,
              color: Colors.yellowAccent,
              child: const Text('Some title message'),
            ),
          )
        ],
      ),
    );

赞(0）回复(0）举报 2023-06-24

li9yvcax2#

我找到了一个解决方案，使用墨水和设置颜色与装饰，而不是使用容器，它不会覆盖阴影。
例如：变更：

Container(
  color: Colors.amber,
)

致：

Ink(
  decoration: BoxDecoration(
    color: Colors.amber,
  ),
)

结果：
容器：

油墨：

赞(0）回复(0）举报 2023-06-24

我来回答

Flutter-为什么材料标高不起作用？

2条答案

相关问题

热门标签

最新问答