【发布时间】：2022-10-02 04:25:21
【问题描述】：
我正在尝试创建这种选项卡视图，但我很困惑小部件在 Flutter 和 SyncFusion 中的名称是什么。我想用 2 个选项卡创建此图表，第一个选项卡是电压图表，第二个选项卡是电流图表。谢谢你。
这是我当前的代码：
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: const SideMenu(),
body: FutureBuilder(
future: getData2(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Loading();
} else if (snapshot.hasError) {
return Text(snapshot.hasError.toString());
} else {
final themeChange = Provider.of<DarkThemeProvider>(context);
return SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (Responsive.isDesktop(context))
const Expanded(
child: SideMenu(),
),
Expanded(
flex: 5,
child: SingleChildScrollView(
primary: false,
padding: const EdgeInsets.all(defaultPadding),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(defaultPadding),
child: const Header(),
),
const SizedBox(height: defaultPadding),
Container(
decoration: BoxDecoration(
color: themeChange.darkTheme
? secondaryColor
: quarterColor,
borderRadius:
const BorderRadius.all(Radius.circular(10)),
),
padding: const EdgeInsets.all(defaultPadding),
child: DefaultTabController(
length: 2,
child: Column(
children: [
SizedBox(
height: 40.0,
child: TabBar(
controller: _tabController,
indicator: const UnderlineTabIndicator(
borderSide: BorderSide(
color: Colors.yellow,
width: 3.0,
),
),
indicatorPadding:
const EdgeInsets.all(2.0),
tabs: const [
Text(
\'Voltages Chart\',
),
Text(
\'Currents Chart\',
),
],
),
),
],
),
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
ListView.builder(
itemCount: 100,
itemBuilder: (context, int index) {
return const DwpVoltageCharts();
},
),
ListView.builder(
itemCount: 100,
itemBuilder: (context, int index) {
return const DwpCurrentCharts();
},
),
],
),
),
const SizedBox(height: defaultPadding),
Container(
padding: const EdgeInsets.all(defaultPadding),
decoration: BoxDecoration(
color: themeChange.darkTheme
? secondaryColor
: quarterColor,
borderRadius:
const BorderRadius.all(Radius.circular(10)),
),
child: const Center(
child: PowerChart(),
),
),
],
),
),
)
],
),
);
}
}),
);
}
}
请这是我当前的代码，我不知道如何使它工作，因为我对它真的很陌生。谢谢你。
-
你试过 TabBarView
-
我还没有尝试过。目前我只找到有关 TabBar 和 PageView 的教程。谢谢你的建议，我会试试的，真的很感激兄弟。
-
docs.flutter.dev/cookbook/design/tabs查看此文档，希望对您有所帮助
-
我已经尝试过了，但它似乎抛出了一个错误。我查看了这个stackoverflow.com/questions/71661568/flutter-tab-bar-view，但在我的代码中它不起作用。你能再给我一个例子吗？我已尝试阅读文档，但没有帮助。谢谢你。
-
你能分享一下我会尽力帮助你的代码吗
标签： flutter dart flutter-web syncfusion