6
votes

Comment utiliser un widget sans sliver dans un CustomScrollView

J'essaie d'ajouter un widget Texte dans CustomScrollView mais j'ai des problèmes comme la cible n'est pas la même.

Voici mon widget:

@override
Widget build(BuildContext context) {
  final double statusBarHeight = MediaQuery.of(context).padding.top;
  return Scaffold(
      key: scaffoldKey,
      body: CustomScrollView(
        semanticChildCount: 2,
        slivers: <Widget>[
          _buildAppBar(context, statusBarHeight),
          Text('test')
        ],
      ));
}

Le _buildAppBar La méthode renvoie un SliverAppBar.

J'ai besoin d'utiliser un widget Padding au lieu du texte, mais je pense que ce sera pareil, c'est le même problème.


1 commentaires

SliverToBoxAdapter


3 Réponses :


-3
votes

Une fois que vous travaillez avec des slivers, vous devez utiliser un enfant sliver enveloppant vos autres widgets non sliver. Puisque vous souhaitez utiliser Padding , vous pouvez en fait profiter du widget SliverPadding , qui accepte votre Text comme son enfant.

Donc, au lieu d'avoir Text ('test') comme vous l'avez, remplacez-le par SliverPadding (child: Text ('test)) à la place.

Il y a quelques widgets clairs dont vous voudrez peut-être être conscient. Jetez un œil ici à la réponse acceptée de Collin Jackson et également à Slivers, Demystified article pour une meilleure compréhension.


1 commentaires

Il n'y a pas de tel champ child dans SliverPadding . Il ne peut être utilisé que pour envelopper un autre ruban. Utilisez plutôt SliverToBoxAdapter .



3
votes

La meilleure réponse n'est pas correcte, elle provoque une assertion padding == null . @blaneyneil a écrit la bonne solution: utiliser pour SliverToBoxAdapter.


0 commentaires

8
votes

J'ai trouvé une meilleure façon d'utiliser les non-slivers dans un CustomScrollView, utilisez le widget SliverToBoxAdapter. Donnez votre widget non-sliver comme enfant du widget SliverToBoxAdapter et votre travail terminé.

return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverToBoxAdapter(
        child: Stack(
          children: <Widget>[
            Container(
              height: 200,
              width: 200,
              color: Colors.green,
            ),
            Positioned(
              child: Container(color: Colors.yellow),
              top: 50,
              left: 50,
            )
          ],
        ),
      )
    ],
  ),
);

ceci est la sortie du code ci-dessus


0 commentaires