comment créer une rangée de zones de texte défilables ou de widgets en mouvement dans un ListView?
1.Veuillez, est-ce que quelqu'un peut me dire comment créer une rangée de zones de texte qui peuvent défiler à gauche ou à droite dans Flutter à l'intérieur d'un ListView. Je peux voir que j'essaye de définir une largeur infinie à l'intérieur d'une ListView de largeur finie. Mais, ne peut pas trouver de solution de contournement pour celui-ci.
le code mentionné ci-dessous fonctionne parfaitement si vous commentez simplement la propriété scrolldirection dans customscrollview (c'est-à-dire, changez la direction de défilement en verticale). Mais, je cherche un parchemin horizontal ... J'ai essayé de résoudre ce problème mais pas de chance.
quelqu'un peut-il s'il vous plaît aider et laissez-moi savoir où je me trompe.
- Aussi, comment pouvons-nous créer ou gonfler une mise en page comme nous le faisons avec Android dans le flutter?
J'ai posté le code ci-dessous pour reproduire la même erreur;
Cordialement, Mahi
import 'package:flutter/material.Dart';
import 'package:flutter/rendering.Dart';
import 'package:flutter/widgets.Dart';
void main(){
runApp(new AddNewBlock());
}
class AddNewBlock extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return new _AddNewBlockState();
}
}
class _AddNewBlockState extends State<AddNewBlock>{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Add New Block',
debugShowCheckedModeBanner: false,
home: new Scaffold(
body: new ListView(
shrinkWrap: true,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(
left: 16.0,top: 24.0, bottom: 8.0,
),
child: new Text(
'Add New Block',
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.teal[300],
),
),
),
new Container(
margin: const EdgeInsets.only(left: 16.0, top: 16.0, bottom: 8.0),
child: new Text ('Block Name'),
),
new Container(
margin: const EdgeInsets.fromLTRB(16.0, 8.0, 0.0, 8.0),
child: new Text ('Block A1',
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold
),),
),
new Divider(color: Colors.grey,),
new Container(
margin: const EdgeInsets.only(left: 16.0, top: 8.0,bottom: 8.0),
child: new Text('NO. OF FLOORS',
style: new TextStyle(
fontSize: 12.0,
),
),
),
new Container(
child: new Row(
children: <Widget>[
new Flexible(
child: new CustomScrollView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
slivers: <Widget>[
new SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: new SliverList(
delegate: new SliverChildListDelegate(
<Widget>[
const Text('this'),
const Text('is'),
const Text('scroll'),
const Text('view'),
const Text('inside'),
const Text('list'),
const Text('view'),
const Text('in'),
const Text('horizontal'),
const Text('direction')
],
),
),
),
],
),
),
],
),
),
],
),
),
);
}
}
Je pense que cela est simple tant que vous mettez un conteneur de hauteur fixe sur votre horizontal ListView. Mais peut-être que je ne comprends pas votre question. S'il vous plaît envoyez votre code et le message d'erreur que vous obtenez si cela ne fonctionne pas.
import 'package:flutter/material.Dart';
import 'package:flutter/gestures.Dart';
import 'Dart:collection';
void main() {
runApp(new MaterialApp(home: new DemoApp()));
}
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Nested ListView Example')),
body: new Center(
child: new ListView(
children: <Widget>[
new Container(
height: 80.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: new List.generate(10, (int index) {
return new Card(
color: Colors.blue[index * 100],
child: new Container(
width: 50.0,
height: 50.0,
child: new Text("$index"),
),
);
}),
),
),
],
),
),
);
}
}
J'ai fait ceci pour rendre mon widget Row défilable:
Text("Debilidades",
style: TextStyle(fontWeight: FontWeight.bold)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: pokemon.weaknesses == null
? <Widget>[
Text(
"No tiene debilidades",
style: TextStyle(color: Colors.grey),
)
]
: pokemon.weaknesses
.map((weakness) => FilterChip(
backgroundColor: Colors.red,
label: Text(
weakness,
style: TextStyle(color: Colors.white),
),
onSelected: (b) {}))
.toList()),
),
J'ai réussi à le faire en utilisant ListView.builder()
Voici le code complet:
import 'package:flutter/material.Dart';
void main() {
runApp(new MaterialApp(
home: new MyApp()));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Scroll on the Horizon"),
centerTitle: true,
),
body: new ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return new Row(
children: <Widget>[
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
],
);
},
));
}
}
N'oubliez pas de définir la propriété scrollDirection sur Axis.horizontal, car la valeur par défaut est vertical.
Vous pouvez utiliser:
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox( // Horizontal ListView
height: 100,
child: ListView.builder(
itemCount: 20,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
width: 100,
alignment: Alignment.center,
color: Colors.blue[(index % 9) * 100],
child: Text(index.toString()),
);
},
),
),
SizedBox( // Vertical ListView
height: 200,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return Container(
width: 50,
height: 50,
alignment: Alignment.center,
color: Colors.orange[(index % 9) * 100],
child: Text(index.toString()),
);
},
),
),
],
);
}
Remarque: pour des raisons de simplicité, je n’ai pas refactorisé les deux ListView dans un seul widget.
Sortie
