显示具有特定列表的页面维护底部 AppBar - Flutter

Question

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



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 可见。

谢谢。

Answer 1

要实现您正在寻找的功能，您将不得不编写多个 switch 和 break case，这可能很麻烦，因为您的使用将非常基础。

我的建议是 this package

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

显示具有特定列表的页面维护底部 AppBar - Flutter

Show Page with Specific List maintaining Bottom AppBar - Flutter

routes

flutter

bottomappbar