Блог

Главная - Вопросы по программированию - Свойство завершающего значка ListTile удалено, когда я нажал на bottomnavigationbar «избранное»

Свойство завершающего значка ListTile удалено, когда я нажал на bottomnavigationbar «избранное»

#android #flutter #mobile #navigation

#Android #трепетание #Мобильный #навигация

Вопрос:

У меня есть GIF для описания ниже. И как, когда я нажал trailing icon на music_page.dart , тогда music_favorite_page.dart будет создаваться значение, которое.

Это main.dart

 import 'package:abc/pages/music_page.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [MusicPage(), MusicFavoritePage()];

  void _onTappedBar(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text("App"),
      // ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onTappedBar,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.library_music),
            title: Text("Music"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text("Favorite"),
          ),
        ],
      ),
    );
  }
}

Это music_page.dart

 import 'package:flutter/material.dart';

class MusicPage extends StatefulWidget {
  MusicPage({Key key}) : super(key: key);

  @override
  _MusicPageState createState() => _MusicPageState();
}

class _MusicPageState extends State<MusicPage>
    with AutomaticKeepAliveClientMixin {
  final _karaokeList = Karaoke.getAll();
  final _savedKaraoke = <Karaoke>{};

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("Music"),
      ),
      body: _buildListViewKaraokeList(),
    );
  }

  Widget _buildListViewKaraokeList() {
    return ListView.builder(
      itemCount: _karaokeList.length,
      itemBuilder: (context, index) =>
          _buildListTileKaraokeList(_karaokeList[index]),
    );
  }

  Widget _buildListTileKaraokeList(Karaoke karaoke) {
    final _isTapped = _savedKaraoke.contains(karaoke);

    return ListTile(
      leading: Text(karaoke.maBaiHat),
      title: Text(karaoke.tenBaiHat),
      subtitle: Text(karaoke.tenCaSi),
      trailing: Icon(
        _isTapped ? Icons.favorite : Icons.favorite_border,
        color: _isTapped ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (_isTapped) {
            _savedKaraoke.remove(karaoke);
          } else {
            _savedKaraoke.add(karaoke);
          }
        });
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Это music_favorite_page.dart

 
class MusicFavoritePage extends StatefulWidget {
  MusicFavoritePage({Key key}) : super(key: key);

  @override
  _MusicFavoritePageState createState() => _MusicFavoritePageState();
}

class _MusicFavoritePageState extends State<MusicFavoritePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Music Favorite"),
      ),
      body: Center(
        child: Text("Music Favorite Page"),
      ),
    );
  }
}

GIF:

1

Ответ №1:

Вы можете скопировать вставить запустить полный код ниже
, который вы можете использовать PageView , вы можете увидеть рабочую демонстрацию ниже
фрагмента кода

 void _onTappedBar(int index) {
    print("onItemSelected");
    setState(() => _currentIndex = index);
    _pageController.jumpToPage(index);
  }
...  
body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          children: _children,
          onPageChanged: (int index) {
            print("onPageChanged");
            setState(() {
              _currentIndex = index;
            });
          },
        ),

рабочая демонстрация

введите описание изображения здесь

полный код

 import 'package:flutter/material.dart';

class Karaoke {
  String maBaiHat;
  String tenBaiHat;
  String tenCaSi;

  Karaoke({this.maBaiHat, this.tenBaiHat, this.tenCaSi});
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  PageController _pageController = PageController();
  final List<Widget> _children = [MusicPage(), MusicFavoritePage()];

  void _onTappedBar(int index) {
    print("onItemSelected");
    setState(() => _currentIndex = index);
    _pageController.jumpToPage(index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          children: _children,
          onPageChanged: (int index) {
            print("onPageChanged");
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        selectedItemColor: Colors.amber[800],
        unselectedItemColor: Colors.blue,
        onTap: _onTappedBar,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.library_music),
            title: Text("Music"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text("Favorite"),
          ),
        ],
      ),
    );
  }
}

class MusicPage extends StatefulWidget {
  MusicPage({Key key}) : super(key: key);

  @override
  _MusicPageState createState() => _MusicPageState();
}

class _MusicPageState extends State<MusicPage>
    with AutomaticKeepAliveClientMixin {
  final _karaokeList = [
    Karaoke(maBaiHat: "a", tenBaiHat: "a1", tenCaSi: "a2"),
    Karaoke(maBaiHat: "b", tenBaiHat: "b1", tenCaSi: "b2"),
    Karaoke(maBaiHat: "c", tenBaiHat: "c1", tenCaSi: "c2")
  ]; //Karaoke.getAll();
  final _savedKaraoke = <Karaoke>{};

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("Music"),
      ),
      body: _buildListViewKaraokeList(),
    );
  }

  Widget _buildListViewKaraokeList() {
    return ListView.builder(
      itemCount: _karaokeList.length,
      itemBuilder: (context, index) =>
          _buildListTileKaraokeList(_karaokeList[index]),
    );
  }

  Widget _buildListTileKaraokeList(Karaoke karaoke) {
    final _isTapped = _savedKaraoke.contains(karaoke);

    return ListTile(
      leading: Text(karaoke.maBaiHat),
      title: Text(karaoke.tenBaiHat),
      subtitle: Text(karaoke.tenCaSi),
      trailing: Icon(
        _isTapped ? Icons.favorite : Icons.favorite_border,
        color: _isTapped ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (_isTapped) {
            _savedKaraoke.remove(karaoke);
          } else {
            _savedKaraoke.add(karaoke);
          }
        });
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class MusicFavoritePage extends StatefulWidget {
  MusicFavoritePage({Key key}) : super(key: key);

  @override
  _MusicFavoritePageState createState() => _MusicFavoritePageState();
}

class _MusicFavoritePageState extends State<MusicFavoritePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Music Favorite"),
      ),
      body: Center(
        child: Text("Music Favorite Page"),
      ),
    );
  }
}

Ответ №2:

Прямо сейчас, всякий раз, когда вы посещаете MusicPage , _savedKaraoke список устанавливает нулевой массив, как {} здесь:

     final _savedKaraoke = <Karaoke>{};

Для очень простого решения вы можете использовать поставщика состояния приложения для получения или установки _savedKaraoke списка.