Question

随着flutter for web的引入，我不得不尝试实现一个网站样式标题，该标题在使用路线和整个应用程序时保持不变。由于每个脚手架都有自己的appBar，因此Appbar似乎不是解决方案。我创建了带有Column的{{1}}中的标题小部件。但是，由于所有内容都应该是MaterialApp或CupertinoApp的子级，因此此实现感觉很错误。

如果searchBar标头可以放在MaterialApp中，并且我能够使用Navigator，那将是首选。我真的是在这里寻求指导和实现此目标的“正确”方法。

MaterialApp

Answer 1

尽管未使用路由，但我可以使用IndexedStack解决此问题。关闭搜索页面时，这还将保留我在ProductsPage()中所做的所有滚动。 AppBar是持久性的，能够将代码保持在最低限度。

main.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Discover Brindle',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Brdl'
      ),
      home: MainPage(),
    );
  }
}

main_page.dart

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final _searchBloc = kiwi.Container().resolve<SearchBloc>();
  final _productsBloc = kiwi.Container().resolve<ProductsBloc>();
  PageController pageController;
  int currentPage = 0;

  void _onSearchActive({bool isActive}) {
    setState(() {
      this.currentPage = isActive ? 1 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: _buildScaffold(),
    );
  }

  Widget _buildScaffold() {
    return BlocProviderTree(
      blocProviders: [
        BlocProvider<SearchBloc>(bloc: _searchBloc),
        BlocProvider<ProductsBloc>(bloc: _productsBloc),
      ],
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: SearchBar(onIsActive: _onSearchActive),
        ),
        body: IndexedStack(
          children: [
            ProductsPage(),
            SearchPage(),
          ],
          index: currentPage,
        ),
      ),
    );
  }
}

Flutter Web持久头

1 个答案: