Question

当用户按下onTapDown（）和onTapUP（在GestureDetector内部）时，我想更新我的MaterialButton。但是我无法做到这一点。我尝试了但没有成功。我已经在控制台中打印了一些信息，以检查我的代码是否正常运行，但是在不更新我的MaterialButton小部件的情况下，一切正常运行。请帮我我的一些代码如下：-

（此代码用于可更改背景图片的按钮）。

Container(
color: Colors.amber,
alignment: Alignment.center,
padding: EdgeInsets.only(top: 15, bottom: 10),
child: Text(
   "CALL FUNTIONS",
    style: TextStyle(
       fontSize: 25,
       fontWeight: FontWeight.bold,
  ),
)),
Container(
padding: EdgeInsets.only(bottom: 10),
color: Colors.amber,
child: callFunctionsForLessThan600Pixel(),
),


Widget callFunctionsForLessThan600Pixel() {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
       lessThan600Pixel(Key("LockCallButton"),"button_default","locked"),
   lessThan600Pixel(Key("UnLockCallButton"),"button_default","unlocked"),
       lessThan600Pixel(Key("StatusCallButton"),"button_default","info"),
      ],
    ),
  ],
);
}

Widget lessThan600Pixel(Key key, String buttonName, String svgName) {
return MaterialButton(
  key: key,
  child: ConstrainedBox(
    constraints: BoxConstraints(
      maxHeight: 70,
      maxWidth: 70,
    ),
    child: GestureDetector(
      child: Stack(
        children: <Widget>[
          Image.asset("assets/images/$buttonName.png",),
          SvgPicture.asset(
            "assets/images/$svgName.svg",
            height: 30,
            width: 30,
            color: Colors.white,
          ),
        ],
        alignment: Alignment.center,
      ),
      onTapDown: (v) {
        buttonTappedDown(key, svgName);
      },
      onTapUp: (v) {
        buttonTappedDown(key, svgName);
      },
    ),
  ),
  onPressed: buttonPressed,
  elevation: 0,
  highlightElevation: 0,
  highlightColor: Colors.amber,
);
}



void buttonTappedDown(Key key, String svgName) {
setState(() {
  lessThan600Pixel(key, "button_pressed", svgName);
});
}

void buttonTappedUp(Key key, String svgName) {
setState(() {
  lessThan600Pixel(key, "button_default", svgName);
});
}

Answer 1

要拥有交互式UI，您需要将小部件类设置为有状态，在onPressed函数上，只需使用 setState（）方法即可执行任何更改。这样，小部件知道必须刷新。

如果小部件是无状态的，它将永远不会更新。

以下是Goolge的入门教程，可以很好地教您Statefull逻辑：https://flutter.dev/docs/development/ui/interactive

Answer 2

My all code are below:-


import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
var screenWidth;
var isMobile;
var scaffoldKey = GlobalKey<ScaffoldState>();
bool isTap = false;


@override
Widget build(BuildContext context) {
isMobile = MediaQuery
    .of(context)
    .size
    .width < 600;
screenWidth = MediaQuery
    .of(context)
    .size
    .width;

return Scaffold(
  key: scaffoldKey,
  backgroundColor: Colors.amber[300],
  appBar: AppBar(
    title: Text("Home Page"),
  ),
  body: SingleChildScrollView(
    child: Container(
      child: Column(
        children: <Widget>[
          Container(
              color: Colors.amber,
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 15, bottom: 10),
              child: Text(
                "CALL FUNTIONS",
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              )),
          Container(
            padding: EdgeInsets.only(bottom: 10),
            color: Colors.amber,
            child: callFunctionsForLessThan600Pixel(),
          ),
          Container(
              color: Colors.amber,
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 8),
              padding: EdgeInsets.only(top: 15, bottom: 10),
              child: Text(
                "SMS FUNTIONS",
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              )),
        ],
      ),
    ),
  ),
  );
  }


 Widget callFunctionsForLessThan600Pixel() {
 return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        lessThan600Pixel(Key("LockCallButton"), "button_default", "locked"),
        lessThan600Pixel(
            Key("UnLockCallButton"), "button_default", "unlocked"),
        lessThan600Pixel(Key("StatusCallButton"), "button_default", "info"),
      ],
    ),
  ],
 );
 }

 void buttonTappedDown(Key key, String svgName) {
 setState(() {
  lessThan600Pixel(key, "button_pressed", svgName);
 });
 }

void buttonTappedUp(Key key, String svgName) {
setState(() {
  lessThan600Pixel(key, "button_default", svgName);
});
}

 Widget lessThan600Pixel(Key key, String buttonName, String svgName) {
return MaterialButton(
  key: key,
  child: ConstrainedBox(
    constraints: BoxConstraints(
      maxHeight: 70,
      maxWidth: 70,
    ),
    child: GestureDetector(
      child: Stack(
        children: <Widget>[
          Image.asset("assets/images/$buttonName.png",),
          SvgPicture.asset(
            "assets/images/$svgName.svg",
            height: 30,
            width: 30,
            color: Colors.white,
          ),
        ],
        alignment: Alignment.center,
      ),
      onTapDown: (v) {
        buttonTappedDown(key, svgName);
      },
      onTapUp: (v) {
        buttonTappedDown(key, svgName);
      },
    ),
  ),
  elevation: 0,
  highlightElevation: 0,
  highlightColor: Colors.amber,
);
}
}

在flutter中更新现有的StatefulWidget类的小部件

2 个答案: