如何使颤振中的标签指示器变小？

Question

大家好，我有一个自定义圆形应用栏和选项卡指示器，我想让它变小，因为我的应用程序太大了。上面发布了带有默认圆形应用栏的自定义圆形应用栏的图像。 appbar 应该比默认的小。 有人可以帮我吗？

import 'package:flutter/material.dart';

class TimeInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(55.0),
              child: AppBar(
                backgroundColor: Colors.white,
                elevation: 0,
                bottom: TabBar(
                  indicatorWeight: 0,
                    unselectedLabelColor: Colors.red,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      color: Colors.redAccent,
                    ),
                    tabs: [
                      Tab(
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                                  color: Colors.redAccent, width: 1)),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text("Test1"), 
                          ),
                        ),
                      ),
                      Tab(
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                                  color: Colors.redAccent, width: 1)),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text("Test2"),
                          ),
                        ),
                      ),
                      Tab(
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                                  color: Colors.redAccent, width: 1)),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text("Test3"),
                          ),
                        ),
                      ),
                    ]),
              ),
            ),
            body: TabBarView(children: [
              Icon(Icons.games),
              Icon(Icons.beach_access),
              Icon(Icons.cloud_download),
            ]),
          )),
    );
  }
}

Answer 1

Flutter 中的Tab小部件有 2 个可能的固定高度。 如果您同时使用text和icon的参数Tab控件，在高度Tab 。如果你给一个自定义固定为72.0， child或只是text参数，这将是46.0。 即使你孩子的身高不到46，反正也固定在46。 所以如果你想让它更小，你可以创建你的自定义Tab小部件。 为此，您只需复制并粘贴默认的Tab小部件并按如下方式更改高度常量：

// Since you are using a custom child inside your Tab the one you need to 
// change is _kTabHeight

const double _kTabHeight = 46.0;
const double _kTextAndIconTabHeight = 72.0;  

class Tab extends StatelessWidget {
  const Tab({
    Key key,
    this.text,
    this.icon,
    this.child,
  }) : assert(text != null || child != null || icon != null),
       assert(!(text != null && null != child)),
       super(key: key);

  /// The text to display as the tab's label.
  ///
  /// Must not be used in combination with [child].
  final String text;

  /// The widget to be used as the tab's label.
  ///
  /// Usually a [Text] widget, possibly wrapped in a [Semantics] widget.
  ///
  /// Must not be used in combination with [text].
  final Widget child;

  /// An icon to display as the tab's label.
  final Widget icon;

  Widget _buildLabelText() {
    return child ?? Text(text, softWrap: false, overflow: TextOverflow.fade);
  }

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));

    double height;
    Widget label;
    if (icon == null) {
      height = _kTabHeight;
      label = _buildLabelText();
    } else if (text == null && child == null) {
      height = _kTabHeight;
      label = icon;
    } else {
      height = _kTextAndIconTabHeight;
      label = Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            child: icon,
            margin: const EdgeInsets.only(bottom: 10.0),
          ),
          _buildLabelText(),
        ],
      );
    }

    return SizedBox(
      height: height,
      child: Center(
        child: label,
        widthFactor: 1.0,
      ),
    );
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(StringProperty('text', text, defaultValue: null));
    properties.add(DiagnosticsProperty<Widget>('icon', icon, defaultValue: null));
  }
}

现在我将删除图标和文本参数，因为您只是使用子参数。 现在，如果你改变你的_kTabHeight常数，你就可以得到你想要的

const double _kTabHeight = 46.0;

class Tab extends StatelessWidget {
  const Tab({
    Key key,
    this.child,
  }) : assert(child != null),
       super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterial(context));

    return SizedBox(
      height: _kTabHeight,
      child: Center(
        child: child,
        widthFactor: 1.0,
      ),
    );
  }
}