添加边框半径后为应用栏背景着色

Posted 2023-02-23

【中文标题】添加边框半径后为应用栏背景着色

【英文标题】：Color the background of app bar after adding border radius

【发布时间】：2021-06-11 08:15:27

【问题描述】：

我为应用栏添加了一个边框半径，应用栏的背景保持白色，我想为边框半径凹槽的背景添加颜色。

应用栏代码

  appBar: AppBar(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
    centerTitle: true,
    toolbarHeight: 100,
    title: Text(
      'Registration',
      style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),
    ),
    backgroundColor: Color(0xff1F1F1F),
    // backgroundColor: #,
  ),

【参考方案1】：

您需要更改您的canvasColor 值：

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.transparent, // Change this
      ),
      home: MyHomePage(),
    );

这样你就改变了Scaffold的默认背景颜色！

【参考方案2】：

按照以下方式创建一个自定义 AppBar 并将其用作您的 AppBar。

class CustomAppBar extends StatefulWidget with PreferredSizeWidget
  @override
  _CustomAppBarState createState() => _CustomAppBarState();

  @override
  Size get preferredSize => Size(double.infinity,100);


class _CustomAppBarState extends State<CustomAppBar> 
  @override
  Widget build(BuildContext context) 
    return Container(
      color: Colors.deepOrange,
        child: AppBar(
            backgroundColor: Colors.black,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30),
                ))),);