Я использую прозрачный AppBar, и я бы хотел отобразить тело за прозрачным AppBar, а не ниже. Как это сделать?
Как отобразить тело под виджетами AppBar виджета, а не ниже?
Ответ 1
Чтобы разместить тело под панелью приложений и сделать его прозрачным, в качестве тела требуется стек. Стек должен содержать AppBar, а не эшафот.
body: Stack(
children: <Widget>[...]
),
Первый элемент в стопке находится внизу, а последующие элементы находятся над ним. Если панель приложений прозрачна, она будет работать, но это не так. Сделав зеленый AppBar покажет вам, почему.
return Scaffold(
body: Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
AppBar(title: Text('Hello world'),
backgroundColor: Colors.green,
)
],);
Как вы видите, панель приложений занимает весь экран и использует любые сенсорные события.
Чтобы исправить это, используйте виджет позиции,
body: Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
new Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(title: Text('Hello world'),
backgroundColor: Colors.green,
),),
], )
И вы получите это:
Хорошо, теперь сделайте AppBar прозрачным и удалите тень:
body: Stack(
children: <Widget>[
Container( //My container or any other widget
color: Colors.blue,
),
new Positioned( //Place it at the top, and not use the entire screen
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(title: Text('Hello world'),
backgroundColor: Colors.transparent, //No more green
elevation: 0.0, //Shadow gone
),),
], )
Надеюсь это поможет...
Ответ 2
Вы можете сделать это, используя этот код
return new Scaffold(
body: new Stack(
children: <Widget>[
new Container(
color: Colors.blue.shade200,
),
new AppBar(
title: new Text("App bar"),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
new Positioned(
top: 80.0,
left: 0.0,
bottom: 0.0,
right: 0.0,
//here the body
child: new Column(
children: <Widget>[
new Expanded(
child: Container(
color: Colors.grey,
),
)
],
),
),
],
),
);
Ответ 3
Удалить appBar из скаффолда и просто установите виджет стека в теле, а затем оберните AppBar в качестве последнего виджета в позиционированном виджете.
Примечание: другие ответы верны. Но это опубликовано, потому что если кто-то хочет градиентный фон AppBar и плавающую карту над ним. :)
@override
Widget build(BuildContext context) {
return Scaffold(
body: setUserForm()
);
}
Widget setUserForm() {
return Stack(children: <Widget>[
// Background with gradient
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.bottomCenter,
colors: [Colors.red[900], Colors.blue[700]])),
height: MediaQuery.of(context).size.height * 0.3
),
//Above card
Card(
elevation: 20.0,
margin: EdgeInsets.only(left: 15.0, right: 15.0, top: 100.0),
child: ListView(
padding:
EdgeInsets.only(top: 20.0, left: 20.0, right: 18.0, bottom: 5.0),
children: <Widget>[
TextField(),
TextField()
]
)),
// Positioned to take only AppBar size
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar( // Add AppBar here only
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text("Doctor Form"),
),
),
]);
}
Ответ 4
Вы можете использовать
Scafold(
extendBodyBehindAppBar: true,
)
(в данный момент доступно на канале разработчиков)