我有一个带有饼图的页面,该饼图表示不同的值。我想做的是在饼图下有一个小部件,该小部件的工作方式类似于带有Tabbar的脚手架,该小部件具有不同的小部件,在我的情况下,我已经完成的几个Listview代表了饼图中的所有不同 slice 。当您单击不同的选项卡时,它会切换到相应的列表,如选项卡页。
我没有弄清楚该怎么做,所以如果没有预制的方式,我想我会为此做一个自己的小部件,但是在诉诸于此之前,我想问一下是否已经有这个小部件/方法了。或其他人以前有这个问题。
我刚刚用balsamiq很快地画了一些东西:
一切都完成了,但是选项卡(不需要如此)
我需要输入此小部件的代码如下:
class _ListWithTabsState extends State<ListWithTabs> {
@override
Widget build(BuildContext context) {
//here i need the widget
}
}
class DetailPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return CustomAppPage(
widget: Column(
children: [
PieChartClass(data),
ListWithTabs(data),
],
),
),
}
最佳答案
有一些小部件,如下所述:
https://flutter.dev/docs/cookbook/design/tabs
您基本上使用了DefaultTabController
,TabBar
,Tab
和TabBarView
,它将自动在不同的选项卡之间设置动画。或者,如果您想要更多的控制权,则可以使用自己的 Controller 。
完整示例:
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
关于flutter - 如何在Flutter中使用带标签的窗口小部件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64645862/