diviseur de flottement: Comment pourrais-je ajouter un séparateur entre chaque ligne de mon code?
Comment pourrais-je ajouter un diviseur à la liste? J'utilise flatter pour Android. Je veux ajouter un séparateur entre chaque ligne et je veux coloriser le séparateur et ajouter des styles.
J'ai essayé d'ajouter new divider(); mais j'ai eu des erreurs. J'ai aussi essayé return new divider();.
Voici la capture d'écran de mon application:
Et voici mon code:
import 'package:flutter/material.Dart';
import 'package:flutter/foundation.Dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
buttonTheme: const ButtonThemeData(
textTheme: ButtonTextTheme.primary,
)
),
home: const MyHomePage(),
);
}
}
class Kitten {
const Kitten({this.name, this.description, this.age, this.imageurl});
final String name;
final String description;
final int age;
final String imageurl;
}
final List<Kitten> _kittens = <Kitten>[
Kitten(
name: "kitchen",
description: "mehraboon",
age: 2,
imageurl:
"https://images.pexels.com/photos/104827/cat-pet-animal-domestic-
104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350",
),
Kitten(
name: "garage",
description: "khashen",
age: 1,
imageurl:
"https://images.pexels.com/photos/4602/jumping-cute-playing-animals.jpg?
auto=compress&cs=tinysrgb&dpr=2&h=350",
),
Kitten(
name: "bedroom",
description: "khar zoor",
age: 5,
imageurl:
"https://images.pexels.com/photos/978555/pexels-photo-978555.jpeg?
auto=compress&cs=tinysrgb&dpr=2&h=350",
),
Kitten(
name: "living room",
description: "chorto",
age: 3,
imageurl:
"https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg?
auto=compress&cs=tinysrgb&dpr=2&h=350",
),
];
class MyHomePage extends StatelessWidget {
const MyHomePage({Key key}) : super(key: key);
Widget _dialogBuilder(BuildContext context, Kitten kitten) {
return SimpleDialog(contentPadding: EdgeInsets.zero, children: [
Image.network(kitten.imageurl, fit: BoxFit.fill),
Padding(
padding: const EdgeInsets.all(16.0),
child:
Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Text(kitten.name),
Text('${kitten.age}'),
SizedBox(
height: 16.0,
),
Text(kitten.description),
Align(
alignment: Alignment.centerRight,
child: Wrap(
children: [
FlatButton(onPressed: () {}, child: const
Text("noooo!"),color: Colors.red,),
Padding(padding: const EdgeInsets.all(2.0),),
RaisedButton(onPressed: () {}, child: const
Text("yesss!"),color: Colors.green)
],
),
)
]))
]);
}
Widget _listItemBuilder(BuildContext context, int index) {
return new GestureDetector(
onTap: () => showDialog(
context: context,
builder: (context) => _dialogBuilder(context, _kittens[index])),
child:
Container(
padding: EdgeInsets.all( 16.0),
alignment: Alignment.centerLeft,
child: Text(_kittens[index].name,
style: Theme.of(context).textTheme.headline),
),
) ;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Keys"),
centerTitle: true,
),
body: ListView.builder(
itemCount: _kittens.length,
itemExtent: 60.0,
itemBuilder: _listItemBuilder,
),
);
}
}
Il y a plusieurs façons de faire la même chose. Permettez-moi de les comparer ici.
Pour une courte liste statique
Utilisation ListTile.divideTiles
ListView(
children: ListTile.divideTiles( // <-- ListTile.divideTiles
context: context,
tiles: [
ListTile(
title: Text('Horse'),
),
ListTile(
title: Text('Cow'),
),
ListTile(
title: Text('Camel'),
),
ListTile(
title: Text('Sheep'),
),
ListTile(
title: Text('Goat'),
),
]
).toList(),
)
Pour une longue liste dynamique
Utilisation ListView.separated.
ListView.separated(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('$index sheep'),
);
},
separatorBuilder: (context, index) {
return Divider();
},
)
Cela renvoie deux widgets pour chaque élément, à l'exception du dernier élément. Le separatorBuilder est utilisé pour ajouter le diviseur.
Pour ajouter un séparateur après le dernier article
Créez un widget d'élément personnalisé qui utilise un diviseur ou BoxDecoration.
Utilisation du diviseur
final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
ListTile(
title: Text(items[index]),
),
Divider(), // <-- Divider
],
);
},
);
}
Utiliser BoxDecoration
final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration( // <-- BoxDecoration
border: Border(bottom: BorderSide()),
),
child: ListTile(
title: Text(items[index]),
),
);
},
);
}
Divider et BoxDecoration sont tous deux personnalisables en fonction de la hauteur et de la couleur de la ligne. Divider a également une option de retrait, mais vous pouvez obtenir une BoxDecoration pour faire la même chose avec un certain rembourrage.
Pour plus de style
Utiliser une carte
final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Card( // <-- Card
child: ListTile(
title: Text(items[index]),
),
);
},
);
}
La manière la plus correcte est d'utiliser ListView.separated
ListView.separated(
itemCount: 25,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('item $index'),
);
},
);
Placez votre widget dans un conteneur avec BoxDecoration en tant que
Container(
child: YourWidgetHere(),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.black26))),
);
Sur le didacticiel de prise en main de flutter , il est couvert, la solution proposée est la suivante:
body: ListView.builder(
itemCount: _kittens.length,
itemExtent: 60.0,
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.
if (i.isOdd) return new Divider(color: Colors.purple); // notice color is added to style divider
return _listItemBuilder();
},
),
...
Cela devrait ajouter les séparateurs en tenant compte des rangées impaires et paires pour le faire.
Également pour colorer le séparateur pas "color" à la Classe de séparateur :
new Divider(color: Colors.purple);
Découvrez ce problème: ListView.builder devrait permettre aux clients de spécifier un diviseur Cela indique clairement que:
si vous avez besoin de construire votre liste avec des éléments dynamiques, vous devrez pour l’instant régler vous-même ce problème. Je recommanderais dans la construction du widget de ligne, d'inclure un List Divider en bas avec une colonne ou quelque chose, à l'exception du dernier (vous pouvez tester
index == listData.length - 1).Mais si, comme dans l'exemple que vous montrez, vous connaissez déjà toutes les données de la liste à l'avance ou si vous le construisez sans un
ListView.builder, alors vous pouvez et devriez utiliser le constructeur nomméListView.divideTiles
après this Ajoutez simplement Divider ():
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Image.network(video["imageUrl"]),
Container(
height: 6.0,
),
Text(
video["name"],
textScaleFactor: 1.05,
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Divider(
color: Theme.of(context).primaryColor,
)
],
);