在 Flutter 应用程序中当 kIsWeb == true 时隐藏列表图块

Question

我有一个列表图块，我想对网络用户隐藏并向移动用户显示。我尝试过使用“可见性”小部件，但它似乎不起作用。

列表图块位于 SideDrawer 类中。我已经删除了其他列表图块，以便更容易阅读和找到我试图隐藏列表图块的位置。

我尝试设置一些断点，但执行从未中断。我做错了什么？

这是我的代码：

class MainScreenState extends ConsumerState<MainScreen> {
  int _pageIndex = 0;

  @override
  void initState() {
    super.initState();
    userFName = ref.read(usersNotifierProvider).fName;
    userLName = ref.read(usersNotifierProvider).lName;
    userEmail = ref.read(usersNotifierProvider).email;
    setVisibility();
  }

  final List<Widget> appScreens = [
    const CompanyDashboardScreen(),
    const TransactionDetailScreen(true, true),
    const AppointmentCalendarScreen(),
    const UserProfileScreen(),
    const ChatScreen(),
  ];

  setVisibility() {
    if (kIsWeb) {
      _showOnWeb = false;
    } else {
      _showOnWeb = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(),
      body: SafeArea(child: Container(child: appScreens[_pageIndex])),
      drawer: SideDrawer(),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        selectedIconTheme: const IconThemeData(color: Colors.red),
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.black45,
        type: BottomNavigationBarType.fixed,
        currentIndex: _pageIndex,
        onTap: (value) {
          setState(() {
            _pageIndex = value;
          });
          if (value == 3) {
            ref.read(globalsNotifierProvider.notifier).updatenewUser(false);
          }
        },

        ///
        /// Bottom Navigation Bar items
        ///
        items: const [
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.house), label: "Home"),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.fileInvoiceDollar), label: "Trxn"),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.calendar), label: "Calendar"),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.person), label: "User Profile"),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
        ],
      ),
    );
  }

  // Added this for BottomNavigationBar sync
  void setIndex(int index) {
    if (mounted) setState(() => _pageIndex = index);
  }
}

///
/// Side drawer menu items
///
class SideDrawer extends StatelessWidget {
  SideDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: (ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text("$userFName $userLName"),
            accountEmail: Text(auth.currentUser!.email ?? 'No Email Found'),
          ),
          Column(
            children: <Widget>[
              Visibility(
                visible: _showOnWeb, // Hide this off for web users
                child: ListTile(
                  leading: const FaIcon(FontAwesomeIcons.lock),
                  title: const Text(
                    'Privacy Policy',
                    style: TextStyle(
                        color: Colors.blue,
                        decoration: TextDecoration.underline),
                  ),
                  onTap: () {
                    if (kIsWeb) {
                      _launchInBrowser();
                    } else {
                      Navigator.pop(context);
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) =>
                                  const PrivacyPolicyScreen()));
                    }
                  },
                ),
              ),
              ListTile(
                leading: const Icon(
                  Icons.logout,
                  color: Colors.red,
                ),
                title: const Text('Log Out'),
                onTap: () {
                  // Update the state of the app
                  signOut();
                  // Then close the drawer
                  Navigator.pop(context);
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const LoginScreen()));
                },
              ),
            ],
          ),
        ],
      )),
    );
  }

谢谢

Answer 1

审查代码后，我发现

SideDrawer

是一个无状态小部件，并且您没有将变量

_showOnWeb

传递给它，所以我认为这只是一个草稿代码。对于您的问题，请确保变量

_showOnWeb

pass 正确。

此外，而不是

Visibility

小部件。只需使用普通

if

即可轻松操作

示例

更改自

Column(
   children: <Widget>[
      Visibility(
          visible: _showOnWeb, // Hide this off for web users
          child: ListTile(),
      ),
      ...
   ],
)

到

Column(
   children: <Widget>[
      if (!kIsWeb) // Change to if
          ListTile(),
      ...
   ],
)