Разместите IconButton в правом верхнем углу каркаса.
Я хочу разместить кнопку Iconbutton в правом верхнем углу моего скаффолда, которая программно открывает ящик. Это должен быть верхний правый угол для каждого типа отображения. Использование панели приложений может испортить внешний вид страницы, поскольку мне просто нужен небольшой значок, показывающий, что ящик доступен. Как мне это сделать лучше всего? Моя эшафот используется по умолчанию. Как я могу добиться этого наилучшим образом?
2 ответа
Вы можете добиться этого с помощью стека. Оберните тело вашего Scaffold виджетом Stack и используйте виджет Positioned в качестве первого дочернего элемента стека.
GlobalKey<ScaffoldState> _scafKey = GlobalKey();
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
key: _scafKey,
drawer: YourDrawerWidget(),
body: Stack(
children: <Widget>[
Positioned(
top: 0,
right: 0,
child: IconButton(
icon: Icon(Icons.short_text),
onPressed: (){
_scafKey.currentState.openDrawer();
})),
Container(),
],
),
),
);
}
Замените контейнер своим виджетом (исходным корпусом каркаса).
А также значок IconButton для вашего Icon.
Здесь класс MyHomePage - это AppBar, который вам нужен для вашего скаффолда. Все, что вам нужно сделать, это изменить значок.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: MyHomePage(),
drawer: Container(
width: 100,
color: Colors.red,
),
),
);
}
}
class MyHomePage extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AppBarAction(),
],
),
),
);
}
@override
Size get preferredSize => Size.fromHeight(60);
}
class AppBarAction extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.print),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
}
}