как создать плавающую панель кнопок во флаттере?

Я хочу создать плавающую панель кнопок во флаттере, похожую на floating bottom bar, как показано на общем изображении введите описание изображения здесь

приведенное выше изображение взято из зависимости https://pub.dev/packages/floating_bottom_navigation_bar, это для навигация по страницам, но я не хочу, чтобы навигация просто выполняла действие при нажатии кнопки, и представление должно быть таким же.


person Community    schedule 29.06.2020    source источник


Ответы (1)


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

bottomNavigationBar: FloatingNavbar(
          onTap: (int val) {
            switch (val) {
              case 0:
                {
                  action = "Home";
                }
                break;

рабочая демонстрация

введите описание изображения здесь

полный код

import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _index = 0;
  String action = "Home";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating NavBar Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Floating NavBar Example'),
          centerTitle: true,
        ),
        //If you want to show body behind the navbar, it should be true
        extendBody: true,
        body: Center(
          child: Column(
            children: [
              Text(
                "index: $_index",
                style: TextStyle(
                  fontSize: 52,
                ),
              ),
              Text("$action"),
            ],
          ),
        ),
        bottomNavigationBar: FloatingNavbar(
          onTap: (int val) {
            switch (val) {
              case 0:
                {
                  action = "Home";
                }
                break;

              case 1:
                {
                  action = "Explore"; //statements;
                }
                break;
              case 2:
                {
                  action = "Chats"; //statements;
                }
                break;
              case 3:
                {
                  action = "Settings"; //statements;
                }
                break;
              default:
                {
                  //statements;
                }
                break;
            }

            setState(() => _index = val);
          },
          currentIndex: _index,
          items: [
            FloatingNavbarItem(icon: Icons.home, title: 'Home'),
            FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
            FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
            FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
          ],
        ),
      ),
    );
  }
}
person chunhunghan    schedule 29.06.2020
comment
Я уже разбираюсь в этом методе, искал плавающую панель кнопок без навигации по страницам - person ; 29.06.2020
comment
Вы можете использовать его напрямую. вам не нужно помещать в него какие-либо страницы. - person chunhunghan; 29.06.2020
comment
как мы уменьшаем ширину планки. Например, если у нас есть только две вкладки, тогда ширина будет покрывать весь экран, но мне нужно разместить панель в центре с двумя вкладками. Я не могу уменьшить ширину полосы. Не могли бы вы мне помочь? - person Mallikarjun Hampannavar; 20.05.2021