Блог

Главная - Вопросы по программированию - Как сделать нижнюю навигационную панель из центральной обрезанной

Как сделать нижнюю навигационную панель из центральной обрезанной

#flutter #dart

Вопрос:

Всем привет, я хочу обрезать контейнер сверху по центру.Я хочу, чтобы нижняя панель навигации выглядела так, как показано на рисунке ниже

Я попробовал использовать пользовательский класс clipper, но не добился успеха.

Мой Код

 class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path_0 = Path();
    path_0.moveTo(0, size.height);
    path_0.lineTo(0, 0);
    path_0.lineTo(size.width * 0.3750000, 0);
    path_0.quadraticBezierTo(size.width * 0.4218750, size.height * -0.0017500,
        size.width * 0.4300000, size.height * 0.0550000);
    path_0.cubicTo(
        size.width * 0.4749625,
        size.height * 0.2266000,
        size.width * 0.5257750,
        size.height * 0.2267500,
        size.width * 0.5708875,
        size.height * 0.0550000);
    path_0.quadraticBezierTo(
        size.width * 0.5790125, 0, size.width * 0.6250000, 0);
    path_0.lineTo(size.width, 0);
    path_0.lineTo(size.width, size.height);
    path_0.lineTo(0, size.height);
    path_0.close();
    return path_0;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

Используется так

 ClipPath(
              clipper: TriangleClipper(),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.white60)),
                width: MediaQuery.of(context).size.width,
                height: 80,
              ),
            ),

Выходное изображение:

Комментарии:

1. Проверьте это: pub.dev/пакеты/animated_bottom_navigation_bar

Ответ №1:

как насчет использования кнопки плавающего действия notch, notch:

 return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () { },
    tooltip: 'Increment',
    child: Icon(Icons.add),
    elevation: 2.0,
  ),
  bottomNavigationBar: BottomAppBar(
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[],
    ),
    shape: CircularNotchedRectangle(),
    color: Colors.blueGrey,
  ),
);

Комментарии:

1. Спасибо, но я получаю ошибку «Именованный параметр ‘notchedShape’ не определен».

2. Я понял, теперь это только «форма».

3. Любой способ сделать прозрачную кнопку fab, например, отобразить фон карты нижней панели навигации и кнопку fab

4. попробуйте Scaffold( extendBody: верно,

Метки: