Flutter: - Изменить вывод на странице в зависимости от кнопки

Question

Я создал приложение, которое содержит ряд из трех кнопок, которые при нажатии должны: 1) выделять жирным шрифтом 2) изменять вывод на странице

Я решил шаг 1, выполнив следующее:

Класс страницы имеет переменную экземпляра:

  List<bool> _boldButtons = [false, true, false];

TextStyle каждой кнопки имеет свойство fontWeight:

  fontWeight: _boldButtons[0] ? FontWeight.bold : FontWeight.normal),

И его onPresed:

onPressed: () {
                      setState(() {
                        _boldButtons = [true, false, false];
                      });

Это кажется хакерским, но делает свое дело. Если у кого-то есть лучший способ сделать это, я был бы рад услышать!

Чтобы решить проблему 2) Я думаю сделать что-то вроде этого:

Сделать три метода ( уведомления (), yourRecipes (), избранное ()), которые возвращают контейнер. Имейте переменную экземпляра в классе страницы этого типа:

Container wallOfText;

В каждой кнопке onPressed мы устанавливаем переменную wallOfText равной функции этой кнопки, что-то вроде этого:

onPressed: () {
                      wallOfText =  boldButtons[0] ? wallOfText : notifications();
                      // ternary operator to check if we've already selected the button we're pressing, and therefore don't need to redefine what to display

                      setState(() {
                        _boldButtons = [true, false, false];
                      });

Затем мы отображаем переменную wallOfText в Scaffold.

Это также выглядит очень странно, но может работать. Есть ли более общий способ сделать это?

Answer 1

Я немного изменил ваш код, как будто я взял одну переменную, которая содержит значение выбранной вкладки, и обновил его при выборе вкладки, посмотрите код ниже.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  var selectedTab = 1;
  var selectedText="First Tab";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build


    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.deepOrange,

              child:Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  FlatButton(
                    onPressed: () {
                      setState(() {
                        selectedTab=1;
                        selectedText="First Tab";
                      });

                    },
                    child: Text(
                      "Notifications",
                      style: TextStyle(
                          fontWeight:
                          selectedTab == 1 ? FontWeight.bold : FontWeight.normal),
                    ),
                  ),
                  FlatButton(
                    onPressed: () {
                      setState(() {
                        selectedTab=2;
                        selectedText="Second Tab";
                      });

                    },
                    child: Text(
                      "Your recipe",
                      style: TextStyle(
                          fontWeight:
                          selectedTab == 2 ? FontWeight.bold : FontWeight.normal),
                    ),
                  ),
                  FlatButton(
                    onPressed: () {

                      setState(() {
                        selectedTab=3;
                        selectedText="Third Tab";
                      });
                    },
                    child: Text(
                      "Favorites",
                      style: TextStyle(
                          fontWeight:
                          selectedTab == 3 ? FontWeight.bold : FontWeight.normal),
                    ),
                  ),
                ],
              ) ,
            )
            ,

            Container(
              width: double.infinity,
              height: MediaQuery.of(context).size.height*0.6,
              child:  Align(
                alignment: Alignment.center,
                child: Text(selectedText),
              ),
            )


          ],
        ),
      ),
    );
  }
}

И пожалуйста, проверьте выход