颤振-Listview如何能够像往常一样在tabBar旁边滚动?
我想在主屏幕上构建一个UI,其中有一个颤振-Listview如何能够像往常一样在tabBar旁边滚动?,listview,dart,flutter,tabbar,Listview,Dart,Flutter,Tabbar,我想在主屏幕上构建一个UI,其中有一个Carousel元素,然后在它下面是TabBar。 我使用Listview来保存它,但为什么它滚动时会像往常一样不动呢? 在TabBar元素的列表和主屏幕上的整个元素之间滚动它 看到这个了吗 我的代码在正文中: @override Widget build(BuildContext context) { return ScopedModelDescendant<MainModel>(builder: (context, child,
Carousel
元素,然后在它下面是TabBar
。
我使用Listview
来保存它,但为什么它滚动时会像往常一样不动呢?
在TabBar元素的列表和主屏幕上的整个元素之间滚动它
看到这个了吗
我的代码在正文中:
@override
Widget build(BuildContext context) {
return ScopedModelDescendant<MainModel>(builder: (context, child, model) {
return ListView(
shrinkWrap: true,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 10.0), child: instance),
TabBar(
isScrollable: false,
unselectedLabelColor: Color(0xffD8D8DC),
labelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.tab,
indicator: BubbleTabIndicator(
indicatorHeight: 25.0,
indicatorColor: Colors.black,
tabBarIndicatorSize: TabBarIndicatorSize.tab,
),
tabs: <Widget>[
Tab(text: "Categories"),
Tab(text: "Popular"),
Tab(text: "What's New"),
],
controller: _carouselController,
),
Container(
height: 320.0,
child: TabBarView(
controller: _carouselController,
children: <Widget>[
model.isLoading ? LoadingProgress() : CategoriesTab(),
PopularTab(),
WhatsNewTab(),
],
),
),
],
);
});
}
}
final List<String> imgList = [
'https://image01.kota.com/20140403023925/0000/0000/0046/9681/13sep18bliblimcd.jpg',
'http://pallibazar.com/pub/media/wysiwyg/images/sliders/top-slider-banner-grocery-2.jpg',
'https://www.familydollar.com/content/dam/familydollar/1.14/FD84881_PTH_WeeklySlider_1.15.png',
'http://www.beshoffbros.com/wp-content/uploads/2017/01/Beshoff_Hake_Slider.jpg',
];
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
//Carousel
final CarouselSlider instance = CarouselSlider(
items: imgList.map((url) {
return Container(
margin: EdgeInsets.all(5.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: new BorderRadius.circular(10.0),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black38,
blurRadius: 2.0,
spreadRadius: 1.0,
offset: new Offset(0.0, 1.0)),
]),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: CachedNetworkImage(
imageUrl: url,
fit: BoxFit.cover,
fadeInCurve: Curves.fastOutSlowIn,
width: 700.0,
placeholder: Center(
child: SpinKitFadingCube(
color: Colors.orangeAccent,
size: 30,
),
))));
}).toList(),
viewportFraction: 0.9,
aspectRatio: 2.0,
autoPlay: true,
);
@覆盖
小部件构建(构建上下文){
返回scopedModelSecondant(生成器:(上下文、子对象、模型){
返回列表视图(
收缩膜:对,
儿童:[
填充物(
填充:EdgeInsets.symmetric(垂直:10.0),子级:instance),
塔巴(
isScrollable:错误,
未选择的标签颜色:颜色(0xffD8D8DC),
labelColor:Colors.white,
指标化:TabBarIndicatorSize.tab,
指示器:气泡指示器(
指示灯亮度:25.0,
指示颜色:颜色。黑色,
tabBarIndicatorSize:tabBarIndicatorSize.tab,
),
选项卡:[
选项卡(文本:“类别”),
选项卡(文本:“流行”),
选项卡(文本:“新增内容”),
],
控制器:_转盘控制器,
),
容器(
高度:320.0,
子项:选项卡视图(
控制器:_转盘控制器,
儿童:[
model.isLoading?LoadingProgress():类别选项卡(),
PopularTab(),
WhatsNewTab(),
],
),
),
],
);
});
}
}
最终列表imgList=[
'https://image01.kota.com/20140403023925/0000/0000/0046/9681/13sep18bliblimcd.jpg',
'http://pallibazar.com/pub/media/wysiwyg/images/sliders/top-slider-banner-grocery-2.jpg',
'https://www.familydollar.com/content/dam/familydollar/1.14/FD84881_PTH_WeeklySlider_1.15.png',
'http://www.beshoffbros.com/wp-content/uploads/2017/01/Beshoff_Hake_Slider.jpg',
];
列表映射(列表、函数处理程序){
列表结果=[];
对于(变量i=0;i
请回答。将您的
转盘
包装在容器内
:
Container(
height: MediaQuery.of(context).size.height/3 ;
child : instance
),
对选项卡栏执行相同的操作:
Container(
height: MediaQuery.of(context).size.height/3 ;
child : //Your TabBar here
),
之后,将它们都插入到您的父视图中并完成。这也将使屏幕的每个部分上的滚动独立于它们各自部分上的其他部分,但都可以使用父列表进行移动。很好,但我还没有找到正确的位置。如何仅查看可以滚动的父级列表?然后,选项卡栏中的列表元素如下所示