Flutter 標簽欄指示器：如何更改指示器的垂直 position？

Question

我在這個標簽欄上工作了一段時間，它現在看起來像這樣：

，這是我現在的代碼：

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')),
            ],
          ),
        ),
      ),
    );
  }
}

可以清楚的看到指標的position不太對。 理想情況下，我希望指示器垂直向上移動，靠近（和下方）文本（“Dogs”&&“Cats”），或者垂直向下移動，保持在應用欄的底部。 我怎么能做到這一點？ 任何幫助表示贊賞。

Answer 1

您可以使用TabBar小部件的更多參數來控制這些東西。

我添加了這個，

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

我得到了這個，

如果您希望它更接近，請使用indicatorPadding的vertical值。
如果您想要它更厚或更薄，請使用indicatorWeight 。