flutter tabbar设置indicator高度、宽度
    		       		warning:
    		            这篇文章距离上次修改已过443天,其中的内容可能已经有所变动。
    		        
        		                
                在Flutter中,若要设置TabBar的indicator的高度和宽度,你可以使用TabBar的indicatorSize属性,并提供一个TabBarIndicatorSize.label值。然后,你可以通过indicator属性来自定义指示器的样式,使用BoxDecoration来设置高度和宽度。
以下是一个简单的示例代码,展示如何设置TabBar的指示器高度和宽度:
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              indicatorSize: TabBarIndicatorSize.label,
              indicator: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    width: 2.0, // 指示器的高度
                    color: Colors.blue, // 指示器的颜色
                  ),
                ),
              ),
              tabs: <Widget>[
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
            title: Text('TabBar Indicator Example'),
          ),
          body: TabBarView(
            children: <Widget>[
              Center(child: Text('Tab 1 Content')),
              Center(child: Text('Tab 2 Content')),
              Center(child: Text('Tab 3 Content')),
            ],
          ),
        ),
      ),
    );
  }
}在这个例子中,TabBar的指示器被设置为标签的宽度,并且通过BoxDecoration的border属性设置了指示器的底部边框,从而定义了指示器的高度和颜色。你可以通过调整BorderSide的width属性来改变高度,并且可以通过color属性来改变颜色。
评论已关闭