Блог

У меня есть страница с круговой диаграммой, которая представляет разные значения. Что я хочу сделать, так это разместить под круговой диаграммой виджет, который работает как каркас с панелью вкладок, в которой есть разные виджеты, в моем случае несколько Listviews, которые я уже закончил, которые представляют все разные фрагменты диаграммы. Когда вы нажимаете на разные вкладки, он переключается на соответствующий список, например, на страницу вкладок.

Я не понял, как это сделать, поэтому, если нет готового способа, я думаю, я просто сделаю для этого свой собственный виджет, но прежде чем я прибегну к этому, я хотел спросить, есть ли уже виджет / метод для этого или у кого-то еще была эта проблема раньше.

Я только что быстро разработал кое-что с помощью 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 , и он будет автоматически анимироваться между разными вкладками. Или вы можете использовать свой собственный контроллер, если хотите еще больше контроля.

Полный пример:

 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),
            ],
          ),
        ),
      ),
    );
  }
}