如何在抖动中更新屏幕

时间:2020-08-23 15:50:40

标签: android ios flutter dart

我遇到了麻烦。 我想尝试在之后更新屏幕

setState(() => {
   widgetScreenBuilder = screenWidgets[currentScreen]
});
我的类别选择器中的

已被调用。我试图做到这一点,所以我有一个主屏幕,该屏幕具有用于类别选择器的功能,然后我希望将当前屏幕/小部件作为一个功能。然后,只需更改功能,即可更改选择器下方的屏幕/小部件。更改功能(类别选择器下方的小工具)后,我只是找不到一种刷新页面/主屏幕主体的方法

我的主屏幕:

import 'package:flutter/material.dart';
import 'package:app/widgets/categorySelector.dart';
import 'package:app/data/appData.dart';

class MainScreen extends StatefulWidget {
    @override
    _MainScreen createState() => _MainScreen();
}

class _MainScreen extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColorDark,
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColorDark,
        elevation: 0.0,
        title: Center(
          child: Text(
            "Tournaments",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 26.0,
              letterSpacing: 1.1
              )
          ),
        ),
      ),
      body: Column(
        children: <Widget>[
          CategorySelector(),
          widgetScreenBuilder
        ],
      ),
    );
  }
}

我的类别选择器:

import 'package:app/data/appData.dart';
import 'package:flutter/material.dart';

class CategorySelector extends StatefulWidget {
  @override
  _CategorySelectorState createState() => _CategorySelectorState();
}

class _CategorySelectorState extends State<CategorySelector> {
  final List<String> categories = ['All games', 'New game', "New player", "Top players"];
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 75.0,
      color: Theme.of(context).primaryColorDark,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: categories.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              if (currentScreen != index) {
                currentScreen = index;
                setState(() => {
                  widgetScreenBuilder = screenWidgets[currentScreen]
                });
              }
            }, 
              child: Center(
                child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
                child: Text(
                  categories[index],
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 1.2,
                    color: index == currentScreen ? Colors.white : Colors.white50
                  )
                )
            ),
              ),
          );
        }

        )
    );
  }
}

widgetScreenBuilder,screenWidgets和currentScreen所在的appData.dart文件:

import 'package:app/widgets/allGames.dart';

int currentScreen = 0;
List screenWidgets = [AllGames(), NewGame()];
var widgetScreenBuilder = screenWidgets[currentScreen];

我是应用程序开发,飞镖和扑打的新手,所以我们将不胜感激! 谢谢<3

2 个答案:

答案 0 :(得分:1)

我不太明白你的问题, 但是我认为你应该尝试didChangeDependencies 检查一下:https://api.flutter.dev/flutter/widgets/State/didChangeDependencies.html

答案 1 :(得分:0)

将您的MainScreen类更改为此:

class MainScreen extends StatefulWidget {
    @override
    _MainScreen createState() => _MainScreen();
  }
  
  class _MainScreen extends State<MainScreen> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Theme.of(context).primaryColorDark,
        appBar: AppBar(
          backgroundColor: Theme.of(context).primaryColorDark,
          elevation: 0.0,
          title: Center(
            child: Text("Tournaments",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 26.0,
                    letterSpacing: 1.1)),
          ),
        ),
        body: CategorySelector(), // delete column and just put CategorySelector()
      );
    }
  }

并将您的CategorySelector类更改为此:

class CategorySelector extends StatefulWidget {
      @override
      _CategorySelectorState createState() => _CategorySelectorState();
    }
    
    class _CategorySelectorState extends State<CategorySelector> {
      final List<String> categories = [
        'All games',
        'New game',
        "New player",
        "Top players"
      ];
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            Container(
              height: 75.0,
              color: Theme.of(context).primaryColorDark,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: categories.length,
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      if (currentScreen != index) {
                        currentScreen = index;
                        setState(
                          () =>
                              {widgetScreenBuilder = screenWidgets[currentScreen]},
                        );
                      }
                    },
                    child: Center(
                      child: Padding(
                        padding:
                            EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
                        child: Text(
                          categories[index],
                          style: TextStyle(
                              fontSize: 24.0,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 1.2,
                              color: index == currentScreen
                                  ? Colors.white
                                  : Colors.white54),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            widgetScreenBuilder, // add widgetScreenBuilder here
          ],
        );
      }
    }

您的代码现在可以正常工作了:)

setState()只能在其自己的类中进行更改。