仅颤动具有左上角和右上角边框的顶部边框

2024-04-10

我只需要向小部件(最好是容器/卡片)添加具有左上/右上边框半径的顶部边框阴影。我不需要左/右/下边框。请看下图。

我尝试使用如下容器。

Container(
        child: _buildRemaining(context),
        decoration: BoxDecoration(
          border: Border(top: BorderSide(color: Colors.grey, width: 5)),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
        ),
      ),

对于容器,它会失败,抱怨您不能仅设置顶部边框。

然后使用卡片小部件。

Card(
        elevation: 3,
        margin: const EdgeInsets.only(bottom: 5),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
        ),
        child:_buildRemaining(context))

在卡片上设置标高后,我可以看到阴影,但顶部边框不够可见。仍然无法删除左/右/下边框。

有什么建议请


尝试这个,

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 100.0,
              margin: const EdgeInsets.only(top: 6.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 5.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅颤动具有左上角和右上角边框的顶部边框 的相关文章

随机推荐