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)我想做这样的事情。

做三个方法(notifications(), yourRecipes(), favorites() )返回一个Container. 在页面的类中有一个该类型的实例变量。

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

然后我们在Scaffold中显示wallOfText变量。

这也感觉很黑，但可能会有用。有没有更通用的方法？

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


          ],
        ),
      ),
    );
  }
}

请检查它的输出