时间戳

首页 > 解决方案 > 如何在 Flutter 中创建工作侧边栏

flutter - 如何在 Flutter 中创建工作侧边栏

问题描述

最近我正在关注一个人的速度代码并完成它。

然后我看到代码“appBar”正在使用一个类的代码截图。它与我找到的任何教程都不同，所以我修改了类以添加侧边栏（抽屉），它工作正常但有一个问题。

侧边栏在底层，主体在二楼。你会明白下面的截图

这是在我单击侧边栏按钮之前

这是在我点击按钮之后

这是主屏幕代码：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _country = 'ID';

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: CustomAppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildPreventionTips(screenHeight),
          _buildYourOwnTest(screenHeight),
        ],
      ),
    );
  }

这是 custombarapp 代码

import 'package:flutter/material.dart';
import 'package:covid_19_master/config/palette.dart';

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('this is appbar'),
        backgroundColor: Palette.primaryColor,
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(child: Text('ini header ya')),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
            ListTile(
              title: Text('ini listnya'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

标签： flutterdart

解决方案

问题在于您的CustomAppBar()，它有自己的Scaffold()，它属于Scaffold()您的父类中的另一个HomeScreen()。避免这种事情，因为Flutter StatefulWidget 不能有嵌套的 Scaffolds

不要让事情变得复杂。而是将您的AppBar()andDrawer()用于同一HomePage本身，分别具有属性AppBar()和Drawer()。然后在您的视图中使用它。

主页

看看评论以获得全貌，你会很好:)

class _HomeScreenState extends State<HomeScreen> {
  String _country = 'ID';

  // Appbar code with Appbar Data Type
  Appbar _customAppBar() => AppBar(
    title: Text('this is appbar'),
    backgroundColor: Palette.primaryColor,
    elevation: 0.0,
  );

  // Drawer widget with Drawer property
  Drawer _customDrawer() => Drawer(
     child: ListView(
       children: <Widget>[
         DrawerHeader(child: Text('ini header ya')),
         ListTile(
           title: Text('ini listnya'),
         ),
         ListTile(
           title: Text('ini listnya'),
         ),
         ListTile(
           title: Text('ini listnya'),
         ),
         ListTile(
           title: Text('ini listnya'),
         )
       ]
     )
  );

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      // use it here with Preferred size
      appBar: PreferredSizeWidget(
         preferredSize: Size.fromHeight(kToolbarHeight),
         child: _customAppBar() // your appabr
      ),
      // your drawer
      drawer: _customDrawer(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildPreventionTips(screenHeight),
          _buildYourOwnTest(screenHeight),
        ],
      ),
    );
  }
}

推荐阅读