flutter tabbar设置indicator高度、宽度
warning:
这篇文章距离上次修改已过442天,其中的内容可能已经有所变动。
在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属性来改变颜色。
评论已关闭