Как создать рабочую боковую панель во Flutter - PullRequest
Новая
       10

Как создать рабочую боковую панель во Flutter

1 голос
/ 03 августа 2020

Недавно я следил за кодом скорости парня и завершил sh его.

А потом я вижу, что код "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);
}

1 Ответ

1 голос
/ 03 августа 2020

Проблема с вашим CustomAppBar(), у него есть собственный Scaffold(), который относится к другому Scaffold() в вашем родительском классе, то есть HomeScreen(). Избегайте такого рода вещей, cos Flutter StatefulWidget не может иметь вложенных скаффолдов

Не усложняйте ситуацию. Лучше используйте свои AppBar() и Drawer() в одном и том же HomePage со свойством AppBar() и Drawer() соответственно. Затем используйте его в своем представлении.

MainPage

Посмотрите также на комментарии, чтобы получить полную картину, и все будет хорошо :) 

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),
        ],
      ),
    );
  }
}
...