Savez-vous s'il y a quelque chose que je pouvais faire de mes fins de liste arrondis? J'ai essayé de contourner le constructeur de listeView dans un conteneur avec une décoration de la boîte, Bergnetdius et il n'a pas fonctionné. Toute aide est appréciée.
Comment ça ressemble à: https://i.stack.imgur.com/jr4wj.png P >
Mon code: P>
Padding(
padding: EdgeInsets.only(left: 5.0),
child: Container(
color: null,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: profiles[0].skills.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15)),
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
_filterselectedIndex = index;
});
print(index);
} //setState(() => _filterselected = index)
,
child: Align(
alignment: Alignment.centerRight,
child: Container(
margin: EdgeInsets.all(10.0),
height: 32,
//width: 100,
decoration: BoxDecoration(
color: _filterselectedIndex == index
? Theme.of(context).accentColor
: Colors.white,
borderRadius:
BorderRadius.circular(15.0),
),
child: Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
child: Align(
alignment: Alignment.center,
child: Text(
profiles[0].skills[index],
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
),
);
},
),
))
3 Réponses :
Oui, il y a plusieurs manières. Le moyen le plus simple que je pense utiliserait des conteneurs. Enveloppez votre widget avec un widget de conteneur. Ajoutez ensuite la décoration comme le code ci-dessous: Vous pouvez également le faire à l'aide de clipRrect .
Il y a deux façons de faire cela,
première utilise d'abord * Remarque: Si vous utilisez Voir le code: p> Utilisation du conteneur p> conteneur code> et deuxième est clipRrect code> p> Conteneur Code> Les widgets à l'intérieur s'effectueront si votre Borderradius code> sera un grand nombre. Mais dans clipRrect code> Cela ne se produira pas, il restera à l'intérieur. P> SizedBox(
height: 200.0,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.blue,
width: 150.0,
),
);
},
itemCount: 10
),
),
)
Si je comprends bien votre question, vous souhaitez vouloir contenter du coin de la vue de votre liste, il existe donc diverses méthodes de faire, une méthode enveloppe la liste de récipients dans le conteneur, puis dans la décoration qui lui donnait de la même manière.
J'ai mis en œuvre la même fonctionnalité pour vous. P>
Voici le code. P>
return Scaffold(
appBar: AppBar(
title: Text("App Bar"),
),
body: Container(
padding: EdgeInsets.all(26),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(
16) // <- incease the value for more rounded corner
),
child: ListView(
children: <Widget>[
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
Text("List Item 1"),
Divider(),
],
),
),
);
Pouvez-vous montrer une capture d'écran de ce que vous avez maintenant avec un exemple de code, afin que nous puissions mieux comprendre de quoi vous parlez?
Juste édité le post.