标签栏中的抽屉也显示在银条应用程序栏中

时间:2019-05-30 18:00:22

标签: flutter flutter-sliver

enter image description here我正在尝试学习颤振的新小部件,并被困在使用条形杆中。 我在选项卡栏上使用选项卡栏和抽屉布局,在一个选项卡上,我试图实现sliver app bar,但是sliver app bar正在复制与选项卡栏中相同的抽屉布局。该如何解决?

这是标签栏实现

@override
  Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
  home: DefaultTabController(length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("App Bar"),
          bottom: TabBar(
            tabs:
            [
              Tab(icon: Icon(Icons.account_circle)),
              Tab(icon: Icon(Icons.ac_unit)),
              Tab(icon: Icon(Icons.print))
            ])),
      drawer: Drawer( child: Column(
        children: <Widget>
        [
          ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text("AC UNIT"),
            onTap: ()
            {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.message),
            title: Text("Message"),
          ),
          ListTile(
            leading: Icon(Icons.print),
            title: Text("PRINT"),
          )
        ],
      ),),

      body: TabBarView(children:<Widget>
      [
        Icon(Icons.directions_bike),
        new SecondWidget(title: "Second widget"),
        new ThirdWidget()
      ]))));

这是第三个小部件实现


class ThirdWidget extends StatefulWidget
{
  @override
  _ThirdWidgetState createState() => _ThirdWidgetState();}

class _ThirdWidgetState extends State<ThirdWidget>
{
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>
      [
        SliverAppBar(
          pinned: false,
          expandedHeight: 150,
          flexibleSpace: FlexibleSpaceBar(title: Text("Epic Sliver"))
    )],);}}

2 个答案:

答案 0 :(得分:0)

一种解决方案是将SliverAppBar换成没有Scaffold的附加Appbar,这样SliverAppBar中就不会出现任何图标。

示例:

Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("Hello from app bar"),
      ),
      drawer: YourDrawer(),
      body: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                ...
              ),
            ],
          },
          body: Text("Hello from body"),
        ),
      ),
    );

}

答案 1 :(得分:0)

在您的SliverAppBar()中添加automaticallyImplyLeading: false