web-dev-qa-db-fra.com

Flutter TabBar sans AppBar

J'essaye de créer un écran de disposition de barre d'onglets sans le AppBar cependant. J'ai déjà fait référence à la solution sur ce lien: comment créer la barre d'onglets sans barre d'applications dans Flutter? mais cela ne fonctionne pas pour moi. Voici à quoi ressemble mon écran lorsque je place TabBar dans le appbar: paramètre:

enter image description here

Mon TabBar s'est déplacé vers le coin supérieur gauche sous la barre d'état et tout est coincé dans un coin. C'est presque comme si ce n'était pas là du tout.

Lorsque j'utilise la classe AppBar mais que je ne passe que le bottom: paramètre voici ce qui se passe:

enter image description here

Il y a un espace moche au-dessus de la barre de contrôle qui est évidemment destiné au titre de la barre de contrôle. Voici mon code:

return new Scaffold(
      appBar: new TabBar(
        tabs: widget._tabs.map((_Page page){
          return Text(page.tabTitle);
        }).toList(),
        controller: _tabController,
        isScrollable: true,

      ),
      backgroundColor: Colors.white,
      body: new TabBarView(
          controller: _tabController,
          children: widget._tabs.map((_Page page){
            return new SafeArea(
                top:false,
                bottom: false,
                child: (page.page == Pages.cart?new CartHomeScreen():_lunchesLayout())
            );
          }).toList()
      ),
    );

Comment puis-je simplement avoir TabBar sans cet espace en haut et est-il possible de faire en sorte que les deux éléments d'onglets et leurs indicateurs soient étirés et remplis les espaces latéraux?

dartflutter
14
spongyboss

Votre première capture d'écran montre en fait que cela fonctionne très bien - le problème est que "bien" n'est pas tout à fait ce à quoi vous vous attendiez. La couleur de texte par défaut est le blanc pour la barre de tabulation. Par conséquent, vos étiquettes ne s'affichent pas. La ligne du bas correspond à ce que vous voyez en haut à gauche. De plus, TabBar est déjà un widget de taille préférée, mais il n'a pas la même hauteur qu'un AppBar, donc si c'est ce que vous cherchez, il ne vous ressemblera pas.

Voici un exemple qui fait ressembler la barre d'applications. kToolbarHeight est la même constante qu'AppBar utilise.

import 'package:flutter/material.Dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'msc',
      home: new DefaultTabController(
        length: 2,
        child: new Scaffold(
          appBar: new PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: new Container(
              color: Colors.green,
              child: new SafeArea(
                child: Column(
                  children: <Widget>[
                    new Expanded(child: new Container()),
                    new TabBar(
                      tabs: [new Text("Lunches"), new Text("Cart")],
                    ),
                  ],
                ),
              ),
            ),
          ),
          body: new TabBarView(
            children: <Widget>[
              new Column(
                children: <Widget>[new Text("Lunches Page")],
              ),
              new Column(
                children: <Widget>[new Text("Cart Page")],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Ce qui résulte en ceci:

Screenshot showing tabbed app bar

Modifier:

Comme indiqué dans les commentaires et à partir de ce problème de github , vous pouvez également utiliser la propriété flexibleSpace de la barre d’application pour que la barre d’onglet ait pratiquement le même effet:

return new DefaultTabController(
  length: 3,
  child: new Scaffold(
    appBar: new AppBar(
      flexibleSpace: new Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
            ],
          ),
        ],
      ),
    ),
  ),
);
33
rmtmckenzie

Je prends le code de rmtmckenzie mais seulement pour créer un widget sans application matérielle

return new DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: new Container(
            height: 50.0,
            child: new TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car,color: Colors.grey,)),
                Tab(icon: Icon(Icons.directions_transit,color: Colors.grey)),
                Tab(icon: Icon(Icons.directions_bike,color: Colors.grey)),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_car),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ],
        ),
      ),
    );
6
Raoul Scalise

Essayez de mettre TabBar dans AppBar à flexibleSpace props.

0
mustofa.id

Il suffit d’utiliser l’appui flexiblespace et non l’appui inférieur de l’appBar. Tout dans le widget safeArea et vous pouvez ajouter un remplissage vertical.

home: SafeArea(
        top: true,
        child: Padding(
          padding: const EdgeInsets.only(top: 10.0),
          child: DefaultTabController(
            length: 3,
            child: Scaffold(
              appBar: AppBar(
                flexibleSpace: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.1)),
                    Tab(icon: Icon(Icons.2)),
                    Tab(icon: Icon(Icons.3)),
                  ],
                ),
              ),
              body: TabBarView(
                children: [
                  Icon(Icons.1),
                  Icon(Icons.2),
                  Icon(Icons.3),
                ],
              ),
            ),
          ),
        ),
      )
0
MaxDNet