【问题标题】:adding width to drawer in flutter在颤动中增加抽屉的宽度
【发布时间】:2019-12-11 10:23:21
【问题描述】:

我希望能够为这个抽屉添加宽度,因为它在打开时占用了太多的屏幕,我想稍微减小宽度,这可能吗?我该怎么做?

这是我的脚手架

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text("App Name"),
    centerTitle: true,
  ),
  body: new Center(
  ),

  drawer: Drawer(
  child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
      UserAccountsDrawerHeader(
        accountName: Text('Test123') ,
        accountEmail: Text('test@123.com'),
        currentAccountPicture: Image.network('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a89c3e38-b6f3-48a0-9f9e-df9a0129fb93/daghh5x-4a77b3ec-fd4f-4d17-9f84-5963a8cb5c03.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4OWMzZTM4LWI2ZjMtNDhhMC05ZjllLWRmOWEwMTI5ZmI5M1wvZGFnaGg1eC00YTc3YjNlYy1mZDRmLTRkMTctOWY4NC01OTYzYThjYjVjMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dWTFMrwnbAbj5TtUp9U_vQsohW7MnkRPymzR5wZQoV8'),
        ),

        ListTile(
          title: Text('data'),
        ),
      ],
    ),
  ),
);

【问题讨论】:

    标签: flutter


    【解决方案1】:

    将 Drawer 小部件包装在 Container 小部件中,并将宽度参数传递给 Container。

    drawer: Container(
          width: 50,
          child: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                UserAccountsDrawerHeader(
                  accountName: Text('Test123'),
                  accountEmail: Text('test@123.com'),
                  currentAccountPicture: Image.network(
                      'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a89c3e38-b6f3-48a0-9f9e-df9a0129fb93/daghh5x-4a77b3ec-fd4f-4d17-9f84-5963a8cb5c03.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4OWMzZTM4LWI2ZjMtNDhhMC05ZjllLWRmOWEwMTI5ZmI5M1wvZGFnaGg1eC00YTc3YjNlYy1mZDRmLTRkMTctOWY4NC01OTYzYThjYjVjMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dWTFMrwnbAbj5TtUp9U_vQsohW7MnkRPymzR5wZQoV8'),
                ),
                ListTile(
                  title: Text('data'),
                ),
              ],
            ),
          ),
        ),
    

    【讨论】:

      【解决方案2】:

      这是另一个示例,用于为抽屉指定宽度。

      return SizedBox(
        width: MediaQuery.of(context).size.width * 0.75, // 75% of screen will be occupied
        child: Drawer(
          
        ),
      );
      

      谢谢。

      【讨论】:

      • 这很棒。谢谢!
      【解决方案3】:

      试试这个方法一次。

      drawer: Container(
      width: MediaQuery.of(context).size.width * 0.5,
      child: Drawer()
      ),
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2022-11-02
        • 2017-08-20
        • 2020-09-26
        • 1970-01-01
        • 2015-11-07
        • 1970-01-01
        • 1970-01-01
        • 2019-12-05
        相关资源
        最近更新 更多