J'ai créé un écran en utilisant Si je fais défiler dans Tab1, tab2 défilement automatique. Donc, si je plante à TAB2, énumérez-la du premier article. Comment puis-je empêcher cela?
J'ai créé une application de démonstration simple créée pour démontrer le problème, vous pouvez consulter ce GIST .
état initial de l'écran:
Si je défile tab1 illustré comme ci-dessous:
Tab2 Faites défiler le bas automatiquement indiqué ci-dessous lorsque je défile tab1:
sliverappar , sliverpersistentheader , ongbview et listview . .
3 Réponses :
La raison de cette question est que les deux onglets utilisent le même Voici l'exemple: < p> à l'intérieur de votre tabcontroller qui se trouve dans votre cas defaultTabcontroller qui définit impicicément des contrôleurs d'onglet pour les widgets pour enfants, vous devez Définir explicitement un tabcontroller pour chacun de vos onglets afin que ses actions soient indépendantes de l'autre, mais vous aurez du code supplémentaire pour gérer vos nouveaux contrôleurs: NESTCrollView
Je n'ai pas complètement compris. Je suis nouveau pour flutter et développer des applications mobiles.
Cet article clarifiera ce que j'ai expliqué: Docs.flutter.io/flutter/Material/ ...
Essayez d'envelopper le Exemple: P> TabBarView code> dans un échafaudé séparé qui se trouve à l'intérieur d'un Statefulwidget code>. De cette façon, vous pouvez vous assurer que le corps de l'onglet est reconstruit chaque fois que vous modifiez l'onglet afin que la position de défilement ne soit pas préservée. return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: /* Your headerSliverBuilder code */
body: MyCustomTabWidget(),
)
);
class MyCustomTabWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyCustomTabWidgetState();
}
}
class MyCustomTabWidgetState extends State<MyCustomTabWidget > {
@override
Widget build(BuildContext context) {
return Scaffold(
body: new TabBarView(
children: [
/*Code for both the Containers containing ListViews*/
]
)
)
}
}
Comment puis-je ouvrir le contenu de l'onglet associé lorsque l'utilisateur clique sur des onglets s'il y a séparément ongbarview s pour chaque onglet?
Mes excuses, je pense que je ne l'ai pas bien expliquée dans l'exemple, cela ne devrait pas être un distinct tabbarview pour chaque onglet. Je voulais envelopper tout le contenu sur tabbarview à l'intérieur d'un échafaud qui se trouve dans un Statefulwidget . Je vais mettre à jour le code exemple en conséquence.
Emballage ongbarview avec Problème de l'échafaud Résolu, maintenant lorsque je fais défiler sur Tab1, Tab2 ne faites pas défiler automatiquement mais j'ai causé un autre problème: si je fais défiler l'écran à l'écran, sliverappar < / Code> Ne pas défiler automatiquement, SliverAppar doit faire défiler d'abord alors que la teneur en onglet devrait commencer à faire défiler.
Je n'ai pas essayé d'exécuter mon exemple avec Silverappar . Je vais essayer d'exécuter le code avec SilverappBar et publier une mise à jour dans un certain temps.
J'ai modifié votre GIST avec PAGESTORAGEKEY. Voir Exemple de travail ci-dessous:
import 'package:flutter/material.dart';
void main() async {
runApp(new TestApp());
}
class TestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(primarySwatch: Colors.yellow),
home: new TestAppHomePage(),
);
}
}
class TestAppHomePage extends StatefulWidget {
@override
State createState() => new TestAppHomePageState();
//FPDetailScreen({Key key, @required this.period}) : super(key: key);
}
class TestAppHomePageState extends State<TestAppHomePage>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return new Scaffold(
//bottomNavigationBar: bottomNavBar,
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 120.0,
floating: false,
forceElevated: innerBoxIsScrolled,
backgroundColor: Colors.green,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
centerTitle: true,
title: Text(
"Foo Bar Baz",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
softWrap: true,
maxLines: 1,
),
background: Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
children: <Widget>[
Text(
'10.00 TL',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
],
mainAxisAlignment: MainAxisAlignment.center,
),
Container(
width: 0,
height: 0,
)
],
),
),
//background: ,
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
TabBar(
tabs: [
Tab(
child: Text(
"Tab1",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Tab(
child: Text(
"Tab2",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
];
},
body:TabBarView(
//controller: _tabController,
children: [
CardList('one'),
CardList('two'),
]),
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate(this._tabBar);
final TabBar _tabBar;
@override
double get minExtent => _tabBar.preferredSize.height;
@override
double get maxExtent => _tabBar.preferredSize.height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new Container(
color: Colors.white,
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
class CardList extends StatelessWidget {
final String listKey;
CardList(this.listKey);
@override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
key: PageStorageKey<String>(listKey),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 20,
//itemExtent: 1.0,
itemBuilder: (context, index){
return new ListTile(
title: new Text("Item $index"),
);
}),
);
}
}
Pas travaillé. Tab2 ne devrait pas être défilé lorsque je fais défiler sur Tab1 ou Vice Verset.
Cela fonctionne comme prévu pour moi, jetez un coup d'œil à l'écran de l'écran: drive.google.com/open ? id = 1LYIKJCLPGJ4OSASSGAFO2P142HRHJVFBE
Sur votre défilement GIF Tab2 à partir de Item 2 Non L'élément 1 , il devrait commencer par élément 1
Stackoverflow.com/questions/ 54689594 / ... semble similaire