KivyMD独立登录页与MDBottomNavigation屏幕切换问题求助

Hey there! Let's fix this issue step by step. The core problem right now is that you're placing both LoginScreen and MDBottomNavigation directly in a vertical MDBoxLayout, so they render side-by-side (top to bottom) when the app launches. We need to use ScreenManager properly to handle transitions between the login view and the main app with bottom navigation.

Step 1: Adjust your Screen structure in main.py #

Add a new MainScreen class to wrap your bottom navigation (this keeps the login flow separate from the main app UI):

# screens
class LoginScreen(Screen):
    pass

class MainScreen(Screen):  # New class for the main app with bottom nav
    pass

class HomeScreen(MDBottomNavigationItem):
    pass

class OrdersScreen(MDBottomNavigationItem):
    pass

class ClientsScreen(MDBottomNavigationItem):
    pass

class AccountScreen(MDBottomNavigationItem):
    pass

Step 2: Fix the login logic to trigger screen change only on success #

Right now your login button switches screens immediately, even if login fails. Update the log_in method to switch screens only when authentication succeeds:

def log_in(self, username, password):
    log_in_url = "http://127.0.0.1:8000/api-token-auth/"
    log_in_data = {"username": username, "password": password}
    log_in_request = requests.post(log_in_url, data=log_in_data)
    response_data = json.loads(log_in_request.content.decode())
    if log_in_request.ok:
        token = response_data["token"]
        with open("token.txt", "w") as f:
            f.write(token)
        user_id = response_data["user_id"]
        self.change_screen("main_screen")  # Switch to main screen after successful login
    else:
        # Optional: Add error handling (e.g., show a snackbar)
        print("Login failed! Check your username/password.")

Then remove the app.change_screen("home_screen") line from your loginscreen.kv button—we now handle the screen switch directly in the login method.

Step 3: Rework your main.kv layout #

Use ScreenManager as the core component to manage your two primary views (login and main app). Update your main.kv like this:

#: include kv/loginscreen.kv
#: include kv/homescreen.kv
#: include kv/ordersscreen.kv
#: include kv/clientsscreen.kv
#: include kv/accountscreen.kv

<BL>:
    orientation: "vertical"
    ScreenManager:
        id: screen_manager
        LoginScreen:
            name: "login_screen"
            id: login_screen
        MainScreen:
            name: "main_screen"
            id: main_screen

<MainScreen>:
    MDBottomNavigation:
        HomeScreen:
            name: "home_screen"
            id: home_screen
        OrdersScreen:
            name: "orders_screen"
            id: orders_screen
        ClientsScreen:
            name: "clients_screen"
            id: clients_screen
        AccountScreen:
            name: "account_screen"
            id: account_screen

Step 4: Explicitly set the initial screen (optional but clear) #

To ensure the app starts on the login screen, add this to your build method:

def build(self):
    root = BL()
    root.ids.screen_manager.current = "login_screen"
    return root

Bonus: Preparing for future screens #

For those special screens you want to access without the bottom navigation, just add them directly to the main ScreenManager (alongside login_screen and main_screen). For example:

ScreenManager:
    id: screen_manager
    LoginScreen:
        name: "login_screen"
    MainScreen:
        name: "main_screen"
    SpecialScreen:  # Your custom screen
        name: "special_screen"

You can switch to it from anywhere using app.change_screen("special_screen"), then switch back to main_screen when needed.

This setup will fix your initial problem: the app starts only on the login screen, and transitions to the bottom navigation main screen only after successful login.

内容的提问来源于stack exchange，提问作者Oleksandr K