java - 一起滚动屏幕和列表视图，而不是单独滚动
问题描述
我已经在这里查看了这些答案，但它们对我不起作用。我希望 LatestNewsList 小部件和整个屏幕一起滚动而不是单独滚动。这是屏幕的代码：
class Search extends StatelessWidget {
final tab = new TabBar(tabs: <Tab>[
new Tab(icon: new Icon(Icons.arrow_forward)),
new Tab(icon: new Icon(Icons.arrow_downward)),
new Tab(icon: new Icon(Icons.arrow_back)),
]);
@override
Widget build(BuildContext context) {
final bloc = LatestNewsProvider.of(context);
return DefaultTabController(
length: 6,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.only(
// right: 10,
left: 10,
top: 20,
),
child: Row(
children: [
Container(
width: 32,
height: 32,
child: CircleAvatar(
backgroundImage: NetworkImage(
'https://thispersondoesnotexist.com/image'),
),
),
SizedBox(
width: 20,
),
SearchBar(),
],
),
),
Container(
child: TabBar(
isScrollable: true,
unselectedLabelColor: Colors.black,
labelColor: Colors.blue,
tabs: [
Tab(
text: "Latest",
),
Tab(text: "programming"),
Tab(text: "general"),
Tab(text: "sports"),
Tab(text: "academia"),
Tab(text: "politics"),
]),
),
Container(
//Add this to give height
height: MediaQuery.of(context).size.height,
child: TabBarView(children: [
Column(
children: [
StreamBuilder(
stream: bloc.searchedListBuilderStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return NewsListBuilder(snapshot);
} else if (snapshot.hasError) {
return Text('No results found');
}
bloc.fetchLatestNews();
return Expanded(
child: Column(
children: [
HorizontalSearchList(bloc, bloc.newsStream),
LatestNewsList(bloc, bloc.newsStream, 'Search'),
],
));
},
)
],
),
Column(
children: [
StreamBuilder(
stream: bloc.searchedListBuilderStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return NewsListBuilder(snapshot);
} else if (snapshot.hasError) {
return Text('No results found');
}
bloc.c1Fetch('programming');
return Expanded(
child: Column(
children: [
HorizontalSearchList(bloc, bloc.c1Stream),
LatestNewsList(bloc, bloc.c1Stream, 'Search'),
],
));
},
)
],
),
Column(
children: [
StreamBuilder(
stream: bloc.searchedListBuilderStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return NewsListBuilder(snapshot);
} else if (snapshot.hasError) {
return Text('No results found');
}
bloc.c2Fetch('general');
return Expanded(
child: Column(
children: [
HorizontalSearchList(bloc, bloc.c2Stream),
LatestNewsList(bloc, bloc.c2Stream, 'Search'),
],
));
},
)
],
),
Column(
children: [
StreamBuilder(
stream: bloc.searchedListBuilderStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return NewsListBuilder(snapshot);
} else if (snapshot.hasError) {
return Text('No results found');
}
bloc.c3Fetch('sports');
return Expanded(
child: Column(
children: [
HorizontalSearchList(bloc, bloc.c3Stream),
LatestNewsList(bloc, bloc.c3Stream, 'Search'),
],
));
},
)
],
),
Column(
children: [
StreamBuilder(
stream: bloc.searchedListBuilderStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return NewsListBuilder(snapshot);
} else if (snapshot.hasError) {
return Text('No results found');
}
bloc.c4Fetch('academia');
return Expanded(
child: Column(
children: [
HorizontalSearchList(bloc, bloc.c4Stream),
LatestNewsList(bloc, bloc.c4Stream, 'Search'),
],
));
},
)
],
),
Column(
children: [
StreamBuilder(
stream: bloc.searchedListBuilderStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return NewsListBuilder(snapshot);
} else if (snapshot.hasError) {
return Text('No results found');
}
bloc.c5Fetch('politics');
return Expanded(
child: Column(
children: [
HorizontalSearchList(bloc, bloc.c5Stream),
LatestNewsList(bloc, bloc.c5Stream, 'Search'),
],
));
},
)
],
),
]),
),
],
),
));
}
}
LatestNewsList 小部件内部有一个小部件，该小部件具有负责构建列表视图的代码：
class NewsListBuilder extends StatelessWidget {
final snapshot;
NewsListBuilder(this.snapshot);
@override
Widget build(BuildContext context) {
return Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(8),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return NewsListBuilderItems(snapshot, index);
},
));
}
}
我无法进一步滚动：
解决方案
对于像您这样的更复杂的滚动页面，您应该使用 slivers。在这里阅读更多关于它们的信息：https ://flutter.dev/docs/development/ui/advanced/slivers
我可以为您提供一个简化的示例，说明您想做什么（希望我理解正确）：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Search(),
);
}
}
class Search extends StatefulWidget {
@override
_SearchState createState() => _SearchState();
}
class _SearchState extends State<Search> with SingleTickerProviderStateMixin {
late final TabController _tabController;
@override
void initState() {
// Make sure to set the correct length
_tabController = TabController(length: 5, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
title: Container(height: 40, color: Colors.grey), // this can be the search bar
bottom: TabBar(
indicatorWeight: 3,
indicatorPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
controller: _tabController,
tabs: <Widget>[
Tab(text: "programming"),
Tab(text: "general"),
Tab(text: "sports"),
Tab(text: "academia"),
Tab(text: "politics"),
],
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
/// here you put all your pages
// Example of one page
// You will need to wrap this in StreamBuilder as you do in the
// original code
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
height: 400,
color: Colors.red.shade200,
margin: EdgeInsets.all(4),
);
}),
),
],
),
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
height: 400,
color: Colors.green,
margin: EdgeInsets.all(4),
);
}),
),
],
),
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
height: 400,
color: Colors.blue,
margin: EdgeInsets.all(4),
);
}),
),
],
),
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
height: 400,
color: Colors.blue,
margin: EdgeInsets.all(4),
);
}),
),
],
),
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
height: 400,
color: Colors.blue,
margin: EdgeInsets.all(4),
);
}),
),
],
),
],
),
);
}
}
推荐阅读
- c# - 对 String.Remove 的困惑
- kubernetes-helm - 掌舵测试后如何让豆荚粘在周围
- reactjs - React 状态值不等于 this.state.nameOfState
- drupal - Drupal 8：缓存太大
- amazon-web-services - 配置对 AWS 密钥服务的基于角色的访问时遇到问题
- python - 匹配列的总和 Python
- scala - 无法解析符号 mapValue
- java - 在 weblogic 11g 中创建两个通用数据源，其中一个数据源 URL 工作另一个数据源 URL 不起作用
- flutter - 即使图像被缩放，也将小部件保持在相对点
- javascript - 在反应中操作 DOM