Question

 bottomNavigationBar: BottomAppBar(
      //shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              flex: 4,
              child: IconButton(
                icon: Icon(Icons.home),
                onPressed: () async{

                  Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(builder: (context) => FeedScreen()),
                          (route) => false);
                },
              ),
            ),
            Expanded(
              flex: 14,
              child: IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                 FocusScope.of(context).requestFocus(myFocusNode);
                },
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
              flex: 12,
              child: IconButton(
                icon: Icon(Icons.favorite),
                onPressed: () {
                  // Navigator.push(context,
                  //     MaterialPageRoute(builder: (context) => LikedFeed(widget.uid)));
                },
              ),
            ),
            Expanded(
              flex: 4,
              child: IconButton(
                icon: Icon(Icons.perm_identity),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => profilePage(widget.uid)));
                },
              ),
            ),
          ],
        ),
      ),
    ),

<块引用>

我想在没有浮动动作的底部导航栏中实现这条曲线按钮。

现在只有当我将 FAB 放置在导航栏的中心时才有效，但是我根本不想要 FAB。

上面的代码显示了我的底部导航栏，里面有 3 个图标，我想给出一个曲线（如图所示）作为插件设计。

Answer 1

使用 ClipPath 从矩形容器的顶部切掉半圆。考虑这个例子：

import 'package:flutter/material.dart';

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

class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    
    path.lineTo(size.width, size.height);
    path.lineTo(size.width,0.0);
    path.lineTo(2*size.width/3, 0.0);
    var firstEnd = Offset(size.width / 2, size.height/2);
    path.arcToPoint(Offset(size.width/3, 0),radius:Radius.circular(1));
      
  path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

class MyContainer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child:ClipPath(
   clipper: CustomClipperImage(),
   child: Container(height:100,
                    width: 300,
                    color:Colors.red,)
 )

        ),
      ),
    );
  }
}

底部导航栏中的曲线（颤动）

1 个答案: