当前位置:  开发笔记 > 编程语言 > 正文

Flutter Drawer作为单独的小部件不允许修改宽度

如何解决《FlutterDrawer作为单独的小部件不允许修改宽度》经验,为你挑选了1个好方法。

尝试在新应用中实现侧面抽屉,我可以渲染它,但是它覆盖了整个屏幕,这是我的设置方法:

主页:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: SideDrawer(),
      body: Center(
        child: Text('Home page'),
      ),
    );
  }
}

抽屉小部件在一个单独的文件中:

class SideDrawer extends StatelessWidget {
  const SideDrawer({Key key, this.user}) : super(key: key);
  final FirebaseUser user;

  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: MediaQuery.of(context).size.width * 0.85,
      child: Drawer(
          child: new ListView(
        children: [
          new DrawerHeader(
            child: new Text("DRAWER HEADER.."),
            decoration: new BoxDecoration(color: Colors.orange),
          ),
          new ListTile(
            title: new Text("Item => 1"),
            onTap: () {
              Navigator.pop(context);
              Navigator.push(context,
                  new MaterialPageRoute(builder: (context) => new HomePage()));
            },
          ),
        ],
      )),
    );
  }
}

更新:抽屉应该从登录页面获取用户详细信息,我想这里的问题与抽屉是从单独的家用脚手架上调用有关的,这就是为什么一开始它覆盖了整个区域的原因,尽管有85%屏幕区域已在代码中设置。

我也尝试过此解决方案,但是没有任何建议吗?



1> Arendhal..:

您的大多数代码都可以。但是,您应该制作一个,Widget side(BuildContext context)而不是制作一个SideDrawer class extends StatelessWidget

这是完整的main.dart

import 'package:flutter/material.dart';
import 'side.dart';
import 'user.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  User user = new User("name","firstname","adress","username");

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      drawer: new SideDrawer(user:user),
      body: Center(
        child: Text('Home page'),
      ),
    );
  }
}

这是另一个包含sideDrawer的文件

import 'package:flutter/material.dart';
import 'main.dart';
import 'user.dart';

class SideDrawer extends StatelessWidget {

  const SideDrawer({Key key, this.user}) : super(key: key);
  final User user;

  @override
  Widget build(BuildContext context) {
      return new SizedBox(
        width: MediaQuery.of(context).size.width * 0.85,//20.0, 
        child: Drawer(
            child: new ListView(
          children: [
            new DrawerHeader(
              child: new Text("DRAWER HEADER.."),
              decoration: new BoxDecoration(color: Colors.orange),
            ),
            new ListTile(
              title: new Text(user.name),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
            new ListTile(
              title: new Text(user.firstname),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
            new ListTile(
              title: new Text(user.adress),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
            new ListTile(
              title: new Text(user.username),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new HomePage()));
              },
            ),
          ],
        )),
      );
    }
}

最终显示如下:

跳频对您有帮助。

问候

编辑:

我已经更新了代码和图片以满足您的需求。我还制作了一个假冒品User class,仅用于演示目的。

推荐阅读
ar_wen2402851455
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有