Динамически удалить элемент панели вкладок в флаттере - PullRequest
Новая
       47

Динамически удалить элемент панели вкладок в флаттере

0 голосов
/ 24 сентября 2019

Я следовал руководству (https://flutter.dev/docs/cookbook/design/tabs) о том, как создать панель вкладок, если я хотел, чтобы пользователь добавил / удалил вкладки, как я могу сделать это динамически?

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

При создании вкладки свиток должен указывать на новый сгенерированный элемент

При удалении вкладки свиток должен указывать на предыдущую.элемент

1 Ответ

0 голосов
/ 24 сентября 2019

Прежде всего вам необходимо преобразовать ваш Stateless виджет в виджет с сохранением состояния.Затем установите значки в виде списка переменных. 

class TabBarDemoState extends State<TabBarDemo> {
  var icons = List<Icon>();

  initState() {
    super.initState();
    icons = [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
     ];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: icons,
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: icons,
          ),
        ),
      ),
    );
  }
}

Теперь скажите, что хотите удалить значок из списка.Напишите для него метод обратного вызова, например, нажатие кнопки.Вызывайте этот метод при нажатии кнопки или при возникновении события.Примерно так: 

class TabBarDemoState extends State<TabBarDemo> {
  var icons = List<Icon>();

  initState() {
    super.initState();
    icons = [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
     ];
  }

  void removeAnIcon() {
    if (icons.isNotEmpty) {
       setState({
          icons.removeAt(0);
       });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: icons,
            ),
            title: InkWell(
              onTap: () => removeAnIcon(),
              Text('Tabs Demo')
            ),
          ),
          body: TabBarView(
            children: icons,
          ),
        ),
      ),
    );
  }
}

Когда вы вызываете setState, функция сборки вызывается снова и дерево виджетов перестраивается.Поэтому, когда вы нажимаете на заголовок, вы удаляете один значок и получаете на один значок меньше.Подробнее о Stateful виджетах здесь

...