Flutter中等圆底曲线翼片的设计

agyaoht7  于 2023-01-06  发布在  Flutter
关注(0)|答案(2)|浏览(203)

尝试使用roubded curve来绘制appbar,但无法实现. Appbar
更多参考信息,请查看随附图片。![https://i.stack.imgur.com/I0xvT.png]

h43kikqp

h43kikqp1#

您可以尝试类似BottomAppBar类的操作,并将shape属性设置为具有所需半径的CircularNotchedRectangle。

BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 4.0,
  child: Container(
    height: 50.0,
  ),
)

notchMargin属性确定应用栏的边缘与缺口起点之间的距离。你可以调整此值以控制曲线的大小。
您还可以通过设置应用栏的背景颜色以及向其添加按钮或其他小部件来自定义应用栏的外观。例如:

BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 4.0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
)
nkoocmlb

nkoocmlb2#

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrangeAccent,
      body: Column(
        children: [
          SafeArea(
            bottom: false,
            child: Row(
              children: [
                IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back_ios, color: Colors.white,)),
                Text('Document Details', style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: 16,
                  color: Colors.white
                ),)
              ],
            ),
          ),
          Flexible(
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(30.0),
                    topLeft: Radius.circular(30.0),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 6,
                      offset: const Offset(0, 3), // changes position of shadow
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    Text('Items'),
                    Text('Items'),
                    Text('Items')
                  ],
                ),
              )
          )
        ],
      ),
    );
  }
}

如果应用栏不符合你的需要,你可以不使用它。你可以根据自己的喜好定制你的小工具,使用安全区来避免移动的网络栏和电池条。你可以根据自己的需要添加填充和改变图标来玩主页小工具。

相关问题