flutter - Flutter 自定义抽屉尺寸
问题描述
我正在寻找在 Flutter 中调整抽屉的大小。我不希望抽屉挡住 AppBar,也不希望它超过 50%,寻找这样的东西。
目前就是这样。
我的代码目前是一个基本的 endDrawer
我见过人们在哪里放了第二个脚手架,或者人们在抽屉里放了一个应用栏,但我认为它看起来很便宜。
我宁愿这样抽屉只在主要区域打开,并且尺寸可能只打开屏幕宽度的 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(),
);
}
}
解决方案
交换您的 Drawer 和 Container 小部件并为您的容器提供宽度以执行此操作。
...
Scaffold(
endDrawer: Container(
width: MediaQuery.of(context).size.width / 2,
color: Colors.grey,
child: Drawer(
child: Column(
...
推荐阅读
- javascript - Javascript自动计算
- intellij-idea - IntelliJ-添加testNG maven依赖带来junit
- angular - 在 mat-radio-group 中选择了多个 mat-radio-button
- c++ - Sizer 中的 C++ wxWidgets 巨大差距(初学者)
- javascript - 如何获取 Slack 操作消息发送的 JSON 有效负载?
- ubuntu - .NET Core 3.1 MSBuild 在 Ubuntu 上缺少 libc.musl-x86_64.so.1
- excel - Application.OnKey 用于多个打开的工作簿中的一个工作簿
- python - 如何在特定列中填写值?
- c# - 水晶报表在第二次运行时不显示数据
- deployment - 忽略注释的 Visual Studio 数据库项目