代码之家 › 专栏 › 技术社区 › mana

如何通过单击底部导航项之一打开模态?

dart flutter

mana · 技术社区 · 1 年前

我想点击其中一个Botton导航项目,然后它会打开 showModalBottomSheet 上面有内容。

我似乎找不到解决这个问题的方法,我如何在Flutter中实现这一点?

bottomNavigationBar: BottomNavigationBar(
      onTap: _selectPage,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.event_available_rounded),
          label: 'Events',
        )]),

我试着这样称呼这个模特

if (_selectedPageIndex == 1) {
  activePage = openEventReportOverlay();
  activePageTitle = 'Report';
}


void openEventReportOverlay() {
  showModalBottomSheet(
      context: context, builder: (ctx) => const EventScreen());
}

我弄错了 This expression has a type of 'void' so its value can't be used.

3 回复 | 直到 1 年前

SÆ¡n DÆ°Æ¡ng 1 年前

我认为一切都很正常,例如:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: _selectPage,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: 'One',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.event_available_rounded),
            label: 'Events',
          ),
        ],
      ),
    );
  }

  void _selectPage(int index) {
    if (index == 1) {
      _openModalEvent();
    }
  }

  void _openModalEvent() {
    showModalBottomSheet(
      context: context,
      builder: (context) => const EventScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Events Page"),
    );
  }
}

manhtuan21 1 年前

改变

activePage = openEventReportOverlay();

到

openEventReportOverlay();

Dharam Budh 1 年前

这是最低可行的代码。-50行功能齐全的源代码。

源代码:

class NewHomePage extends StatefulWidget {
  const NewHomePage({super.key});

  @override
  State<NewHomePage> createState() => _NewHomePageState();
}

class _NewHomePageState extends State<NewHomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.looks_one), label: "1"),
          BottomNavigationBarItem(icon: Icon(Icons.looks_two), label: "2"),
        ],
        onTap: (int value) async {
          currentIndex = value;
          setState(() {});
          if (currentIndex == 0) {
          } else {
            await openModalBottomSheet();
          }
        },
      ),
      body: const SafeArea(child: SizedBox()),
    );
  }

  Future<void> openModalBottomSheet() async {
    await showModalBottomSheet(
      context: context,
      builder: (BuildContext context) => const Event(),
    );
    return Future<void>.value();
  }
}

class Event extends StatelessWidget {
  const Event({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text("Hello there!"));
  }
}