(1)実現効果と効果画像
効果:
(1)このヘッドの切り替え回数は固定、つまり左右にスライドできません。html
のタブと同様です。
効果画像:
(2)実装方法
タブコンポーネント
tabbarviewコンポーネント
(3)コードの実装
以下がすべてのコードです。実行する場合は、main.dartにエントリ関数を記述し、ホームポジションにAppBarDemoPage()を記述する必要があります。
import 'package:flutter/material.dart';
//不可以左右滑动的头部选项卡效果
class AppBarDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,//选项的个数必须和下面的内容匹配
child: Scaffold(
appBar: AppBar(
title: Text("甜宠软妹"),
centerTitle: true,
backgroundColor: Colors.green,
bottom: TabBar(
indicatorColor: Colors.red, //指示器
labelColor: Colors.red,
unselectedLabelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label, //选中的红色条
tabs: <Widget>[
Tab(text: "关注"),
Tab(text: "推荐"),
],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: [
ListTile(
title: Text("第一个tab"),
),
ListTile(
title: Text("第一个tab"),
),
ListTile(
title: Text("第一个tab"),
)
],
),
ListView(
children: [
ListTile(
title: Text("第二个tab"),
),
ListTile(
title: Text("第二个tab"),
),
ListTile(
title: Text("第二个tab"),
),
],
)
],
),
),
);
}
}
複数のオプションがあり、幅が足りない場合、スライドスイッチを実現するにはどうすればよいですか?