我希望能够增加这个抽屉的宽度,因为它在打开时占据了太多的屏幕,我想稍微减小宽度,这可能吗?我该怎么做?
这是我的脚手架
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('[email protected]'),
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'),
),
],
),
),
);
将 Drawer 小部件包裹在 Container 小部件内,并将宽度参数传递给 Container。
drawer: Container(
width: 50,
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Test123'),
accountEmail: Text('[email protected]'),
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'),
),
],
),
),
),
这是另一个示例,为抽屉提供宽度。
return SizedBox(
width: MediaQuery.of(context).size.width * 0.75, // 75% of screen will be occupied
child: Drawer(
),
);
谢谢你。
这个方法尝试一次。
drawer: Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Drawer()
),
支架
Drawer
与 Container
或 Sizeable
小部件
Container(
width: 125,
child: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('google.com'),
onTap: () {
widget._controller!.loadUrl(
urlRequest: URLRequest(url: Uri.parse("www.google.com")));
// Update the state of the app.
// ...
},
),
ListTile(
title: const Text('yahoo.com'),
onTap: () {
widget._controller!.loadUrl(
urlRequest: URLRequest(url: Uri.parse("www.yahoo.com")));
// ...
},
),
],
),
),
)
尝试使用下面的代码片段
Container(
width: MediaQuery.of(context).size.width * 0.3, // Container will occupy
30% of total width
child: Drawer(),
);