Question

我正在尝试创建一个菜单，该菜单的状态是通过点击其自身的项设置的，*本例中的menuButton。

我已经通过调用列表视图并创建一个可重复的menuButton来创建菜单，在该菜单中我传递了按钮的特定信息。

所选menuButton的字体将变大

import 'package:flutter/material.dart';
import 'package:theboardwalk/ConsumerSide/mainConsumerScreen.dart';

class homeMenu extends StatefulWidget {
  const homeMenu({Key key, String category}) : super(key: key);

  @override
  _homeMenuState createState() => _homeMenuState();
}

class _homeMenuState extends State<homeMenu> {
   bool isSelected;


  Padding menuButton(BuildContext context, String category, IconData categoryIcon) {
    return Padding(
      padding: const EdgeInsets.all(6),
      child: Container(
        width: MediaQuery.of(context).size.width * .225,
        child: InkWell(
          onTap: () =>
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                if (category == 'Home') {
                  return mainConsumerScreen();
                } else {
                  return mainConsumerScreen();
                }
              })),
          child: Column(
            children: <Widget>[
             Container(
                  height: MediaQuery.of(context).size.height * .1,
                  width: MediaQuery.of(context).size.width * .2,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.deepPurple, Colors.deepPurpleAccent],
                    ),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    categoryIcon,
                    size: MediaQuery.of(context).size.width * .12,
                    color: Colors.white,
                  ),
                ),

            Padding(
              padding: const EdgeInsets.all(6),
              child: Text(
                    category,
                    style: TextStyle(
                      color: Colors.deepPurpleAccent,
                      fontSize: isSelected ? 16 : 18,
                    ),
                ),
            ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: MediaQuery.of(context).size.height * .005),
      child: Container(
        height: MediaQuery.of(context).size.height * .16,
        width: MediaQuery.of(context).size.width * .96,
        child: ListView(
            scrollDirection: Axis.horizontal, children: <Widget>[
          menuButton(context, 'Home', Icons.home),
          menuButton(context, 'Eat', Icons.restaurant_menu),
          menuButton(context, 'Shop', Icons.store),
          menuButton(context, 'Travel', Icons.airplanemode_active),
          menuButton(context, 'Play', Icons.local_activity),
          menuButton(context, 'Services', Icons.build),
        ]),
      ),
    );
  }
}

如何将状态传递回自身？按下ListView的setState并具有listview，然后让按钮监听isSelected bool？

然后，我将使用homeMenu的状态来设置列表的状态

Answer 1

完整的解决方案在这里-https://github.com/aaronksaunders/flutter_drawer_detail

在应用程序的顶级设置提供商

    class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
      providers: <SingleChildCloneableWidget>[
        ChangeNotifierProvider<DrawerStateInfo>(
            builder: (_) => DrawerStateInfo()),
      ],
    );
  }
}

但是主要思想是创建一个管理状态的provider对象

class DrawerStateInfo with ChangeNotifier {
  int _currentDrawer = 0;
  int get getCurrentDrawer => _currentDrawer;

  void setCurrentDrawer(int drawer) {
    _currentDrawer = drawer;
    notifyListeners();
  }

}

在抽屉中获取状态

var currentDrawer = Provider.of<DrawerStateInfo>(context).getCurrentDrawer;

然后在抽屉中设置状态

Provider.of<DrawerStateInfo>(context).setCurrentDrawer(0);

飞镖/颤振列表->设置选定类别

1 个答案: