【问题标题】:Flutter Tab Bar Indicator: How to change the vertical position of the indicator?Flutter Tab Bar Indicator:如何改变指标的垂直位置?
【发布时间】:2021-08-08 22:49:19
【问题描述】:

我在这个标签栏上工作了一段时间,现在看起来像这样:

,这是我的代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
        hoverColor: Colors.transparent,
      ),
      title: 'Flutter Demo',
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            leading: Icon(
              Icons.menu,
              color: Colors.black,
            ),
            actions: [
              Icon(
                Icons.settings,
                color: Colors.black,
              ),
            ],
            automaticallyImplyLeading: false,
            backgroundColor: Colors.white,
            title: Padding(
              padding: EdgeInsets.only(left: 50, right: 50),
              child:TabBar(
              indicatorColor: Colors.pink[100],
              indicatorSize: TabBarIndicatorSize.label,  
              tabs: [
                Tab(text: 'Dogs'),
                Tab(text: 'Cats'),
              ],
              labelColor: Colors.black,
            ),),
          ), //appbar
          body: TabBarView(
            children: [
              Center(child: Text('DOGS')),
              Center(child: Text('CATS')),
            ],
          ),
        ),
      ),
    );
  }
}

很明显,指标的位置不太对。理想情况下,我希望指示器垂直向上移动,靠近(和低于)文本(“Dogs”&&“Cats”),或者垂直向下移动,保持在应用栏的底部。我怎么能做到这一点?任何帮助表示赞赏。

【问题讨论】:

    标签: flutter flutter-layout tabbar indicator


    【解决方案1】:

    您可以使用TabBar 小部件的更多参数来控制这些东西。

    我已经添加了这个,

    indicatorWeight: 4,
    indicatorPadding: EdgeInsets.symmetric(vertical: 8),
    

    我得到了这个,

    如果您想要更接近,请使用 vertical 的值 indicatorPadding
    如果您想要更厚或更薄,请使用indicatorWeight

    【讨论】:

    • 非常感谢。你拯救了我的一天:)
    猜你喜欢
    • 2011-07-05
    • 2021-04-15
    • 2011-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-29
    • 2019-08-28
    • 2021-06-22
    相关资源
    最近更新 更多