是否有等同于为 BottomBar 固定 SliverAppBar?
Is there an equivalent to pin SliverAppBar for BottomBar?
我可以固定 SliverAppBar,然后在其下方滚动 SliverList 内容。是否有等效于让列表在 BottomBar 下滚动的方法?
诀窍是我希望同时固定 AppBar 和 BottomBar 以产生滚动效果。
这是AppBar的效果图
这是Bottom的效果图
我想在文本输入下滚动显示消息,而不是填充颜色。
这可能吗?谢谢。
底部导航栏通常不滚动。你可以把你的 BottomNavigationBar
放在 Scaffold
的 bottomNavigationBar
插槽中,然后使用 AnimatedCrossFade
如果你想把它带入和带出视野吗?如果这不能解决您的用例,请更具体地说明您想要实现的滚动效果。
编辑:如果您只想将小部件放置在屏幕底部并将其堆叠在您的列表中,您可以使用 Stack
.
import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
primaryColorBrightness: Brightness.light,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
ScrollController _scrollController = new ScrollController();
List<Widget> _items = new List.generate(60, (index) {
return new Text("item $index");
});
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: [
new ListView(
controller: _scrollController,
children: new UnmodifiableListView(_items),
),
new Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: new AppBar(
elevation: 0.0,
backgroundColor: Colors.white.withOpacity(0.8),
title: new Text('Sliver App Bar'),
),
),
new Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
width: 3.0,
color: Colors.blue.shade200.withOpacity(0.5)
),
color: Colors.white.withOpacity(0.8),
borderRadius: new BorderRadius.all(
new Radius.circular(10.0),
),
),
height: 40.0,
margin: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 10.0)
),
),
],
),
);
}
}
我可以固定 SliverAppBar,然后在其下方滚动 SliverList 内容。是否有等效于让列表在 BottomBar 下滚动的方法?
诀窍是我希望同时固定 AppBar 和 BottomBar 以产生滚动效果。
这是AppBar的效果图
这是Bottom的效果图
我想在文本输入下滚动显示消息,而不是填充颜色。
这可能吗?谢谢。
底部导航栏通常不滚动。你可以把你的 BottomNavigationBar
放在 Scaffold
的 bottomNavigationBar
插槽中,然后使用 AnimatedCrossFade
如果你想把它带入和带出视野吗?如果这不能解决您的用例,请更具体地说明您想要实现的滚动效果。
编辑:如果您只想将小部件放置在屏幕底部并将其堆叠在您的列表中,您可以使用 Stack
.
import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
primaryColorBrightness: Brightness.light,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
ScrollController _scrollController = new ScrollController();
List<Widget> _items = new List.generate(60, (index) {
return new Text("item $index");
});
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: [
new ListView(
controller: _scrollController,
children: new UnmodifiableListView(_items),
),
new Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: new AppBar(
elevation: 0.0,
backgroundColor: Colors.white.withOpacity(0.8),
title: new Text('Sliver App Bar'),
),
),
new Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
width: 3.0,
color: Colors.blue.shade200.withOpacity(0.5)
),
color: Colors.white.withOpacity(0.8),
borderRadius: new BorderRadius.all(
new Radius.circular(10.0),
),
),
height: 40.0,
margin: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 10.0)
),
),
],
),
);
}
}