Question

我正在尝试在每个按钮下方添加文本。 Facebook按钮下的“ Facebook”，google按钮下的“ google”。
在点击时填充背景色
当单击两个按钮时，一个应保留为白色背景，另一个应具有背景色。

Widget chooseType(){
    return Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    GestureDetector(
      onTap: ()=>print("facebook"),
      child: Container(
        height: 100.0,
        width: 100.0,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                  color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
            ],
            image: DecorationImage(image: AssetImage('assets/facebook.jpg'))
            ),
      ),
    ),
    GestureDetector(
      onTap: ()=>print("google"),
      child: Container(
        height: 100.0,
        width: 100.0,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                  color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
            ],
            image: DecorationImage(image: AssetImage('assets/google.jpg'))),
      ),
    )
  ],
);
  }

Answer 1

您可以保持使用很少的变量，如下面的代码所示。

我不太清楚您想如何显示文字，但据我所知。我希望以下示例对您有所帮助。

 bool isfbclicked = false;
  bool isgoogleclicked = false;

  click(bool isfacebook) {
    setState(() {
      if (isfacebook) {
        isfbclicked = true;
        isgoogleclicked = false;
      } else {
        isfbclicked = false;
        isgoogleclicked = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title"),
      ),
      body: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            GestureDetector(
              onTap: () {
                print("facebook");
                click(true);
              },
              child: Column(
                children: <Widget>[
                  Container(
                    height: 100.0,
                    width: 100.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: isfbclicked ? Colors.blue : Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black26,
                              offset: Offset(0, 2),
                              blurRadius: 6.0)
                        ],
                        image: DecorationImage(
                            image: AssetImage('assets/images/crown.png'))),
                  ),
                  Text("facebook")
                ],
              ),
            ),
            GestureDetector(
              onTap: () {
                print("google");
                click(false);
              },
              child: Column(
                children: <Widget>[
                  Container(
                    height: 100.0,
                    width: 100.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: isgoogleclicked ? Colors.amber : Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black26,
                              offset: Offset(0, 2),
                              blurRadius: 6.0)
                        ],
                        image: DecorationImage(
                            image: AssetImage('assets/images/crown.png'))),
                  ),
                  Text("google")
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

Answer 2

将您的主窗口小部件更改为有状态，然后像下面这样相应地设置值。

import 'package:flutter/material.dart';


class EmptyPage extends StatefulWidget{
  @override
  _EmptyPageState createState() => _EmptyPageState();
}

class _EmptyPageState extends State<EmptyPage> {

  Color facebookColor = Colors.white;
  Color googleColor = Colors.white;


  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          GestureDetector(
            onTap: (){
              setState(() {
                this.facebookColor = Colors.blue;
                this.googleColor = Colors.white;
              });
            },
            child: Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: facebookColor,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
                  ],
                  image: DecorationImage(image: AssetImage('assets/facebook.jpg'))
              ),
            ),
          ),
          GestureDetector(
            onTap: (){
              setState(() {
                this.facebookColor = Colors.white;
                this.googleColor = Colors.blue;
              });
            },
            child: Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: googleColor,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
                  ],
                  image: DecorationImage(image: AssetImage('assets/google.jpg'))),
            ),
          )
        ],
      )
    );
  }

}

颤振在手势检测器中添加文本

2 个答案: