0

我正在构建一个带有底部应用栏的应用程序，该应用程序带有经典索引页面以导航主菜单：



class OverAllScreen extends StatefulWidget {
final int initialPage;
OverAllScreen(this.initialPage);
@override
_OverAllScreenState createState() => _OverAllScreenState();
}

class _OverAllScreenState extends State<OverAllScreen> {
List _pageOptions = [
  Shop(),
  Home(),
  Discover(),
  Account(),
];

int _page;

@override
void initState() {
  super.initState();
  setState(() {
    _page = widget.initialPage;
  });
}

@override
Widget build(BuildContext context) {
  final _theme = Theme.of(context);
  final _mediaSize = MediaQuery.of(context).size;

  return Scaffold(
    body: _pageOptions[_page],
    bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      backgroundColor: _theme.primaryColor,
      selectedItemColor: _theme.accentColor,
      unselectedItemColor: Colors.white,
      currentIndex: _page,
      onTap: (index) {
        setState(() {
          _page = index;
        });
      },
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'),
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Discover'),
        BottomNavigationBarItem(
            icon: Icon(Icons.person_outline), label: 'Account'),
      ],
    ),
  );
}
}

在帐户页面中，在小部件树的下方，我有一个显示详细产品列表的小部件。当我单击一个简单（非详细）产品网格中的一个项目时，我希望打开此页面。我可以使用 Navigator.of(context).push(MaterialPageR0ute(...))) 轻松做到这一点。但是，我想保持 bottomAppBAr 可见（当您查看用户的产品时，就像 instagram 一样）。问题是我在小部件树中有特定的产品列表，所以我不能在 occount 页面级别将它们作为参数传递，而不通过将函数作为参数传递回每一步的小部件。


class ProductList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _products = Provider.of<List<ProductModel>>(context);

    return ListView.builder(
      itemExtent: 150,
      scrollDirection: Axis.horizontal,
      itemCount: _products.length,
      itemBuilder: (context, index) => Card(
        margin: const EdgeInsets.all(5),
        child: InkWell(
          child: ProductTile(_products[index]),
          onTap: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => ProductDetailList(
                productIndex: index,
                products: _products,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这里我使用 MaterialPageRoute，但希望让 BottomAppBar 保持可见。

谢谢你。

4

1 回答 1

1

要实现您正在寻找的功能，您必须编写几个开关和中断案例，这可能很麻烦，因为您的使用将是非常基本的。

我建议买这个包

这个包提供了一个持久的底部导航栏，它是高度可定制的，你甚至可以使用像鲑鱼一样的底部栏，而无需编写任何额外的代码。

于 2020-11-25T11:50:16.870 回答