我可以固定一个SliverAppBar,然后在它下面滚动一个SliverList内容。是否有相当于让列表滚动到底栏下的内容?
诀窍是我希望AppBar和BottomBar同时固定以具有滚动效果。
这是Appbar的呈现
这是底部的渲染
我想在文字输入下翻阅信息,但没有填充颜色。
这有可能吗?谢谢您。
最佳答案
底部导航栏通常不滚动。你能把你的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)
),
),
],
),
);
}
}