flutter tabbar设置indicator高度、宽度
在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
属性来改变颜色。
评论已关闭