Cách cập nhật màn hình chập chờn

Question

Tôi có một vấn đề rung. Tôi muốn thử cập nhật màn hình của mình sau

setState(() => {
   widgetScreenBuilder = screenWidgets[currentScreen]
});

trong bộ chọn danh mục của tôi đã được gọi. Tôi đã cố gắng tạo ra nó để tôi có một màn hình chính có chức năng cho bộ chọn danh mục của tôi và sau đó tôi muốn có màn hình / widget hiện tại dưới dạng một chức năng. Sau đó, tôi có thể thay đổi màn hình / tiện ích bên dưới bộ chọn của mình chỉ bằng cách thay đổi chức năng. Tôi chỉ không thể tìm thấy cách làm mới trang / phần nội dung của màn hình chính sau khi tôi thay đổi chức năng (tiện ích con bên dưới bộ chọn danh mục)

Màn hình chính của tôi:

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

Bộ chọn danh mục của tôi:

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

        )
    );
  }
}

Tệp appData.dart nơi chứa widgetScreenBuilder, screenWidgets và currentScreen:

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

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

Tôi là người mới bắt đầu phát triển ứng dụng, hãy phi tiêu và rung động nên mọi sự trợ giúp sẽ được đánh giá cao! Cảm ơn <3

Answer 1

Tôi không thể hiểu rõ câu hỏi của bạn, nhưng tôi nghĩ bạn nên thử didChangeDependencies Kiểm tra nó: https://api.flutter.dev/flutter/widgets/State/didChangeDependencies.html

Answer 2

thay đổi lớp MainScreen của bạn thành lớp này:

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()
      );
    }
  }

và thay đổi lớp CategorySelector của bạn thành:

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

Mã của bạn hiện đang hoạt động bình thường :)

setState () chỉ có thể thực hiện các thay đổi trong lớp của chính nó.