Flutter自定义抽屉尺寸

huwehgph  于 2022-12-05  发布在  Flutter
关注(0)|答案(2)|浏览(174)

我正在寻找大小我的抽屉在Flutter。我不希望抽屉阻止应用程序栏,我不希望它去超过50%,寻找这样的东西。

这就是目前的情况。

我目前的代码是一个基本的endDrawer
我见过人们在哪里放了第二个脚手架,或者人们在抽屉里放了一个Appbar,但我觉得它看起来很便宜。
我宁愿有它,使抽屉只在主要区域打开,大小可能只打开50%的屏幕宽度。
我可以这样做吗?

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: Drawer(
        child: Container(
          color: Colors.grey,
          child: Column(
            children: <Widget>[],
          ),
        ),
      ),
      backgroundColor: Colors.white,
      appBar: AppBar(
        actions: [
          Builder(
            builder: (context) => IconButton(
              icon: Icon(FontAwesomeIcons.ellipsisV),
              onPressed: () => Scaffold.of(context).openEndDrawer(),
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
        ],
        backgroundColor: Color(0xfff11b7c),
        title: Row(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Text("Group", style: TextStyle(fontFamily: 'Segoe',fontSize: 25, fontWeight: FontWeight.w700, foreground: Paint()
                ..style = PaintingStyle.stroke
                ..strokeWidth = 5
                ..color = Colors.white
                )),
                Text(
                  "Group",
                  style: TextStyle(
                      fontFamily: 'Segoe',
                      fontSize: 25,
                      fontWeight: FontWeight.w700,
                      color: Color(0xff383838)),
                ),
              ],
            ),
            Stack(
              children: <Widget>[
                Text("Post!", style: TextStyle(fontFamily: 'Segoe',fontSize: 25, fontStyle: FontStyle.italic ,fontWeight: FontWeight.w700, foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 5
                  ..color = Colors.white
                )),
                Text(
                  "Post!",
                  style: TextStyle(
                      fontFamily: 'Segoe',
                      fontSize: 25,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w700,
                      color: Color(0xfff11b7c)),
                ),
              ],
            ),
            Padding(padding: EdgeInsets.fromLTRB(15, 0, 0, 0),),
            Icon(FontAwesomeIcons.solidComments, color: Colors.white,)
          ],
        ),
      ),
      body: Container(),
    );
  }
}
mwkjh3gx

mwkjh3gx1#

交换Drawer和Container小部件并为容器提供宽度。

...
Scaffold(
  endDrawer: Container(
    width: MediaQuery.of(context).size.width / 2,
    color: Colors.grey,
    child: Drawer(
      child: Column(
       ...
wswtfjt7

wswtfjt72#

在EndDrawer和Drawer中有参数widht,您可以使用width来编辑抽屉的宽度

Drawer(
  width: 220,
  backgroundColor: ColorConfig.white,
  child: SingleChildScrollView(
    child: Column(...

相关问题