flutter - 如何使标签指示器在颤动中变小？

Question

大家好，我有一个自定义的圆形 appbar 和选项卡指示器，我想让它的尺寸更小，因为我的应用程序太大了。上面发布了带有默认圆形 appbar 的自定义圆形 appbar 的图像。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),
            ]),
          )),
    );
  }
}

标签： flutter

Answer 1

TabFlutter 中的小部件有 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,
      ),
    );
  }
}