为页面动态换肤(即调用不同css文件时),刷新主页时总是会先加载出默认样式,闪一下后才出现设定样式

Posted 2023-05-04

我在我的页面上分别引用了3种css样式作为皮肤:
<LINK title=css1 href="css/index1.css" type=text/css rel="alternate stylesheet">
<LINK title=css2 href="css/index2.css" type=text/css rel="alternate stylesheet">
<LINK title=css3 href="css/index.css" type=text/css rel=stylesheet>
也就是说默认选择的是index.css作为样式,其他两个为备选,用户不做任何操作时默认调用index.css,然后我通过在页面上指定元素的点击事件实现换皮肤的功能,替换其他css样式.
功能可以实现,但是问题是当我刷新页面时,总是会闪一下index.css的样式,然后才显示设定的样式,请问这个怎么解决?是不是一定要把选择的css路径存入数据库，每次都要读取数据库中的值，有没有其他办法没有？

参考技术A 可以使用cookie保存用户对 皮肤的选择，但是不用保存完整的css路径，后台加载时候，先读取cookie，然后加载css样式表，你说的闪一下 应该是你的css文件放的位置有问题 或者是 css文件编写的问题！追问

我用的就是cookie值去保存的，但是每次切换页面的时候，总是先加载index.css闪一下，然后才加载其他的css，这个选择的css路径只能存到数据库中才能避免闪一下的问题吗？css的文件和放置的位置没有问题

追答

我觉得，是你的主题css定义有重复的类，如果只有一个地方定义了样式，那就不存在后面的类把前面已定义的覆盖了， 也就是看到闪一下。

追问

我用的是JQUERY，根据点击按钮选择不同的css路径，而index.css是默认网页第一次加载时候的样式，点击换肤按钮之后，加载index1.css，然后刷新页面（当然也保存了cookie），就会有闪一下

本回答被提问者采纳 参考技术B

在页面渲染完成前加载样式(function())() 立即执行函数 $(function ()) DOM加载后

翩翩从安卓抽屉菜单中打开页面后如何刷新主页面？

我有一个问题，我有一个主活动，在那里我已经加载了几个widget类，到目前为止还不错。现在我想做的是在关闭一个在抽屉菜单中触发的页面后刷新主页面。

如果按钮直接在主页面上，它可以工作，但如果动作是从抽屉菜单中触发的，它不能工作。

画面示例或者说它的效果非常好

选项2它应该是这样的，但当我从抽屉菜单中调用页面时，它就不工作了。

参考链接。翩翩公子怎么回退刷新上一页？后退按钮按下后如何刷新页面

有谁有一个想法.这里是代码，用于选项1与主页面上的按钮。

new RaisedButton(
          onPressed: ()=>
              Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageHomeContent()),)
                  .then((val)=>getRefreshRequests()),
          child: Text('Refresh', style: TextStyle(color: Colors.white), ), color: Colors.purple,
          elevation: 2.0,
        ),

重要的是要知道，我已经为抽屉菜单创建了一个类，它有点长，但我你必须要知道。

final Color primaryColor = Colors.white;
final Color activeColor = Colors.grey.shade800;
final Color dividerColor = Colors.grey.shade600;

class BuildDrawer extends StatefulWidget
  @override
  _BuildDrawer createState() => _BuildDrawer();


class _BuildDrawer extends State<BuildDrawer> 
  //region [ ATTRIUTS ]
  final String image = 'https://avatars2.githubusercontent.com/u/3463865?s=460&u=c0fab43e4b105e9745dc3b5cf61e21e79c5406c2&v=4';

  List<dynamic> menuGroupList = [];
  Future<List<dynamic>> _futureMenuGroupList;
  bool _infiniteStop;

  //MenuItemGroupModel menuItemGroup = new MenuItemGroupModel();
  List<dynamic> menuItemList = [];
  Future<List<dynamic>> _futureMenuItemList;
  //Future<MenuItemGroupModel> _futureMenuItemGroup;
  bool _infiniteItemStop;

  //endregion

  @override
  void initState() 
    _futureMenuGroupList = fetchMenuWPList();
    _infiniteStop = false;
  

  @override
  Widget build(BuildContext context) 
    return ClipPath(
      clipper: OvalRightBorderClipper(),
      child: Drawer(
        child: Container(
          padding: const EdgeInsets.only(left: 16.0, right: 40),
          decoration: BoxDecoration(
              color: primaryColor,
              boxShadow: [BoxShadow(color: Colors.black45)]),
          width: 300,
          child: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.symmetric(vertical: 5.0),
                    child: InkWell(
                      onTap: () 
                        //Navigator.push( context, MaterialPageRoute(builder: (context) => PageHomeContent(),),);
                        Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageHomeContent()),)
                            .then((val)=> new MainPage() );
                      ,
                      child:
                      Column(
                        children: <Widget>[
                          Row(
                              children: [
                                Icon(
                                  Icons.format_list_bulleted,
                                  color: activeColor,
                                ),
                                SizedBox(width: 10.0),
                                Text("Home Content",  ),
                                Spacer(),
                              ]
                          ),
                        ],
                      ),

                    ),
                  ),
                  Divider(
                    color: dividerColor,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  

//end Class

//region [ MENU ITEM PAGE ]

//endregion

主页类[ MainPage ]

class MainPage extends StatefulWidget 
  //MainPage(Key key, this.title): super(key: key);
  //final String title;

  @override
  _MainPageState createState() => _MainPageState();


class _MainPageState extends State<WPMainPage> 

  //region [ ATTRIBUTS ]
  List<dynamic> featuredArticles = [];
  List<dynamic> latestArticles = [];
  List<dynamic> pageList = [];
  List<dynamic> menuGroupList = [];
  List<dynamic> categoryHomeList = [];

  Future<List<dynamic>> _futurePageList;
  Future<List<dynamic>> _futureFeaturedArticles;
  Future<List<dynamic>> _futureLastestArticles;
  Widget widgetCategoryBuilder=new Container();

  final _categoryRepository = CategoryRepository();

  ScrollController _controller;
  int page = 1;
  bool _showLoadingPage = true;
  bool _showLoadingCategoryHome = true;
  bool _infiniteStop;
  double heightNoInternet = 280.0;

  // Firebase Cloud Messeging setup
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
  //endregion

  @override
  void initState() 
    super.initState();
    _futureFeaturedArticles = fetchFeaturedArticles(1);
    _futureLastestArticles = fetchLatestArticles(1);
    _futurePageList = fetchPageList();
    getCategoriesOnLocal();

    _controller = ScrollController(initialScrollOffset: 0.0, keepScrollOffset: true);
    _controller.addListener(_scrollListener);

    _infiniteStop = false;
  

  @override
  void dispose() 
    super.dispose();
    _controller.dispose();
  


  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text(Constant.APP_NAME_LONG),
          actions: getActionAppBarButton(context: context),
        ),
        drawer: BuildDrawer(),
        body: Container(
          decoration: BoxDecoration(color: Colors.white70),
          child: SingleChildScrollView(
            controller: _controller,
            scrollDirection: Axis.vertical,
            child: Column(
                children:
                getWidgetList()
            ),
          ),
        ));
  


  getRefreshRequests() async 
    getCategoriesOnLocal();
    //Tools.mySnackBar(context, ' m s g TEST 1 ');
  

  getWidgetList() 
    List<Widget> itemList = new List<Widget>();

    itemList.add(
        new Column(
          children: <Widget>[

            new RaisedButton(
              onPressed: ()=>
                  Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageHomeContent()),)
                      .then((val)=> getRefreshRequests() ),
              child: Text('Refresh', style: TextStyle(color: Colors.white), ), color: Colors.purple,
              elevation: 2.0,
            ),

          ],
        )

    );

    itemList.add(
        getPagebuilderList(isShowTitle: false)
    );

    itemList.add(
        featuredPostBuildSlider(_futureFeaturedArticles)
    );

    /*itemList.add(
      featuredPost(_futureFeaturedArticles),
    );*/
    itemList.add(
        widgetCategoryBuilder
    );


    itemList.add(
        latestPosts(_futureLastestArticles)
    );

    return itemList;
  

  _scrollListener() 
    var isEnd = _controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange;
    if (isEnd) 
      setState(() 
        page += 1;
        _futureLastestArticles = fetchLatestArticles(page);
      );
    
  

  //region [ ALL POST | RECENTS POST ]
  //endregion

  //region [ POST FEATURED | Swiper ]
  //endregion

  //region [ PAGES ]
  //endregion

  //region [ CATEGORIES LOCAL --> ON LIGNE ]
  void getCategoriesOnLocal() async 
    try 
      await _categoryRepository.getCategories().then((itemList) 
        if (itemList != null) 
          setState(() 
            categoryHomeList = itemList;
          );
          getCategoryBuilder();
        
      );
     catch (e) 
      Tools.println("Error: getCategoriesOnLocal: $e");
    
  
  getCategoryBuilder() 
    List<Widget> itemWidgetList=[];
    if(  _showLoadingCategoryHome) 
      if (categoryHomeList.length > 0) 
        for (Category category in categoryHomeList) 
          if (category.count > 0) 
            itemWidgetList.add(
                getItemArticle(category: category)
            );
          
        
        widgetCategoryBuilder=  Column( children: itemWidgetList );
       else 
        widgetCategoryBuilder=  Container();
      
     else 
      widgetCategoryBuilder= Container();
    
    setState(() 
      widgetCategoryBuilder = widgetCategoryBuilder;
    );
    return widgetCategoryBuilder;
  
  Widget getItemArticle(Category category) 
    return
      Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 8.0, right: 8.0),
            child: Row(
              children: <Widget>[
                Text('$category.name',
                  style: homeTitleTextStyle,
                  textAlign: TextAlign.left,),
                Spacer(),
                InkWell(
                  onTap: ()
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => CategoryArticles(category.id, category.name),
                      ),
                    );
                  ,
                  child:  Text('See More',
                    textAlign: TextAlign.right,
                    style: TextStyle(color: Colors.red),),
                ),

              ],),
          ),
          new CategoryHomeBuilder( categorieId: category.id),
        ],
      );
  
//endregion

谁有个建议。

谢谢你的帮助

答案

等待更好的回复。

我替换了 BuildDrawer 阶级与 getBuildDrawer() 方法在主类中。

它的工作原理非常好，但我更希望把它放在一个单独的类中，这样我就可以在另一个页面中使用它......

getBuildDrawer() 
    return ClipPath(
      clipper: OvalRightBorderClipper(),
      child: Drawer(
        child: Container(
          padding: const EdgeInsets.only(left: 16.0, right: 40),
          decoration: BoxDecoration(
              color: primaryColor,
              boxShadow: [BoxShadow(color: Colors.black45)]),
          width: 300,
          child: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.symmetric(vertical: 5.0),
                    child: InkWell(
                      onTap: () 
                        Navigator.of(context).pop();
      Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageHomeContent()),)
          .then((val)=> getRefreshRequests() );
                      ,
                      child:
                      Column(
                        children: <Widget>[
                          Row(
                              children: [
                                Icon(
                                  Icons.format_list_bulleted,
                                  color: activeColor,
                                ),
                                SizedBox(width: 10.0),
                                Text("Home Content",  ),
                                Spacer(),
                              ]
                          ),
                        ],
                      ),

                    ),
                  ),
                  Divider(
                    color: dividerColor,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );