为模态底部表单添加边框阴影。

huangapple go评论65阅读模式
英文:

Add shadow to border of modal bottom sheet

问题

如何在底部模态表单的边框上添加阴影?以下是我的代码:

尽管我已经设置了 elevation 属性,但我在底部表单的边框上没有看到任何阴影。相反,我看到一个普通的边框: 为模态底部表单添加边框阴影。

要在底部模态表单的边框上添加阴影,您可以使用 BottomSheetThemeData 中的 modalElevation 属性。在您的 theme 中添加以下内容:

theme: ThemeData(
  useMaterial3: true,
  bottomSheetTheme: const BottomSheetThemeData(
    modalElevation: 1000.0, // 调整阴影强度
    elevation: 0.0, // 将此值设置为0以取消原始的elevation
    clipBehavior: Clip.hardEdge,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
      ),
    ),
  ),
),

这将为底部模态表单的边框添加阴影效果。

英文:

How can I add a shadow to the border of modal bottom sheet? Here's my code:

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(
          useMaterial3: true,
          bottomSheetTheme: const BottomSheetThemeData(
              modalElevation: 1000.0,
              elevation: 1000.0,
              clipBehavior: Clip.hardEdge,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20))))),
      home: TabBarDemo(),
    );
  }
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: ElevatedButton(
              child: Text('Press'),
              onPressed: () {
                showModalBottomSheet(
                    barrierColor: Colors.transparent,
                    context: context,
                    builder: (context) {
                      return Container();
                    });
              })),
    );
  }
}

Even though I've set the elevation property, I don't see any shadow on the border of the bottom sheet. Instead I see a plain border:
为模态底部表单添加边框阴影。

答案1

得分: 1

你可以使用 boxShadow 来实现这个效果。尝试以下代码。

Scaffold(
  body: Center(
    child: ElevatedButton(
      child: const Text('Press'),
      onPressed: () {
        showModalBottomSheet(
          barrierColor: Colors.transparent,
          context: context,
          builder: (context) {
            return Container(
              height: 300,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
                boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 10.0)],
              ),
            );
          },
        );
      },
    ),
  ),
);
英文:

You can use boxShadow for this. Try this code.

Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Press'),
          onPressed: () {
            showModalBottomSheet(
              barrierColor: Colors.transparent,
              context: context,
              builder: (context) {
                return Container(
                  height: 300,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
                    boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 10.0)],
                  ),
                );
              },
            );
          },
        ),
      ),
    );

答案2

得分: 0

阴影由设置 BottomSheetThemeData.modalElevation 属性或在调用 showModalBottomSheet 时的 elevation 参数控制。在我的示例中,BottomSheetThemeData.elevation 似乎没有任何作用。阴影不明显,也不像 BoxShadow 那样可控,但至少剪切正常工作。在我的问题中,阴影是可见的,但由于较大的 modalElevation 值而扩散开来。

英文:

The shadow is controlled by setting either the BottomSheetThemeData.modalElevation property or the elevation parameter in the call to showModalBottomSheet. BottomSheetThemeData.elevation appears to do nothing in my example. The shadow is not prominent and not controllable as with BoxShadow, but at least clipping works properly. In my question, the shadow was visible, but it was spread out because of the large modalElevation value.

huangapple
  • 本文由 发表于 2023年2月27日 12:09:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75576708.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定