Comment puis-je personnaliser la largeur de l'indicateur TabBar et la hauteur?

voix
0

J'utilise un widget TabBar et je voudrais personnaliser la hauteur et la largeur de l'indicateur. Je ne vois aucune autre propriété en plus la couleur que je peux modifier.

entrez

Créé 30/05/2017 à 21:42
source utilisateur
Dans d'autres langues...                            


4 réponses

voix
1

Donnez votre TabBarpropriété de isScrollable: truesi vous ne voulez pas les onglets pour se dilater pour remplir l'écran horizontalement comme ils le font par défaut.

Vous pouvez utiliser un Containerenveloppé dans une PreferredSizedimensionner le TabBar. (La PreferredSizeseule est nécessaire si vous voulez vivre dans la bottomfente d'un AppBar.) Cela a pour effet de rendre les indicateurs apparaissent plus étroits car le TabBarne remplit pas l'écran. Cependant, l'indicateur a une hauteur codée en dur. Si vous ne l' aimez pas, vous devez importer votre propre copie de tabs.dart et de personnaliser les constantes dans ce fichier.

Notez que vous pouvez également utiliser un Containerpour définir la hauteur de l'individu Tabs, même si cela ne semble pas à ce que vous essayez de faire.

capture d'écran

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('Tabs Demo'),
          bottom: new PreferredSize(
            preferredSize: new Size(200.0, 200.0),
            child: new Container(
              width: 200.0,
              child: new TabBar(
                tabs: [
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'hello'),
                  ),
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'world'),
                  ),
                ],
              ),
            ),
          ),
        ),
        // body: ...
      ),
    );
  }

}
Créé 30/05/2017 à 23:37
source utilisateur

voix
3

Vous pouvez utiliser indicatorSize: TabBarIndicatorSize.labelle TabBar pour rendre l'indicateur de la même taille que l'étiquette.

Ou vous pouvez définir le indicatordirectement, c'est Decorationque vous pouvez personnaliser:

AppBar(
    bottom: TabBar(
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0),
          insets: EdgeInsets.symmetric(horizontal:16.0)
        ),
        tabs: [
          Tab(text: 'tab 1'),
          Tab(text: 'tab 2'),
          Tab(text: 'tab 3'),
        ],
     ),
);

Pour plus d' options de personnalisation vérifier après

Créé 20/09/2018 à 10:15
source utilisateur

voix
-1

Vous pouvez utiliser la propriété TabBar(indicatorWeight:detail Height).

Créé 13/07/2019 à 09:44
source utilisateur

voix
0

Vous pouvez régler l'espacement entre les onglets -> labelPadding: EdgeInsets.symmetric (horizontal: 5),

Créé 19/11/2019 à 14:23
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more