Flutter :- 根据按钮更改页面上的输出答案

【问题标题】：Flutter :- Change output on page based on buttonFlutter :- 根据按钮更改页面上的输出
【发布时间】：2020-07-30 21:50:45
【问题描述】：

我制作了一个应用程序，它有一排三个按钮，按下时应该： 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()、收藏夹()）。在页面的类中有一个属于该类型的实例变量：

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 变量。

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

【问题讨论】：

是否需要更改按钮文字字体系列和屏幕中心的文字？
是的，我都想改。
好吧，给我点时间，试着 aceho=ice it
如果有任何帮助，这里是我的代码：codeshare.io/GARnWx

标签： flutter flutter-layout

【解决方案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),
              ),
            )


          ],
        ),
      ),
    );
  }
}

请检查它的输出

【讨论】：