Question

您好，我在商店和餐厅的首页上做了两个按钮，当我按一下餐厅时，我只想更改内容而不更改应用程序栏和底部导航栏，因此我只需要更改状态，但是我没有一个想法如何做到这一点。如果可能，请提供示例代码。

P.S我使用Navigator.of（context）.push做了，但是它导航到新页面，这不是我想要的。这是我正在使用的代码：

 @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Expanded(
              child: InkWell(
                onTap: () {
                  main.selectedApp = 0;
                  Navigator.of(context).pushNamed("/HomeWidget");
                },
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  height: 50,
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 1,
                        blurRadius: 1,
                        offset: Offset(0, 1), // changes position of shadow
                      ),
                    ],
                    borderRadius: BorderRadius.circular(10),
                    color: selected == 0
                        ? Theme.of(context).accentColor
                        : Theme.of(context).primaryColor,
                  ),
                  child: Center(
                    child: Text(
                      "Shops",
                      style: TextStyle(
                          color: selected == 0
                              ? Theme.of(context).primaryColor
                              : Theme.of(context).accentColor,
                          fontWeight: FontWeight.bold,
                          fontSize: 16),
                    ),
                  ),
                ),
              ),
            ),

            Expanded(
              child: InkWell(
                onTap: () {
                  main.selectedApp = 1;
                  Navigator.of(context).pushNamed("/HomeWidget2");
                },
                child: Container(
                  height: 50,
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 1,
                        blurRadius: 1,
                        offset: Offset(0, 1), // changes position of shadow
                      ),
                    ],
                    borderRadius: BorderRadius.circular(10),
                    color: selected == 1
                        ? Theme.of(context).accentColor
                        : Theme.of(context).primaryColor,
                  ),
                  child: Center(
                    child: Text(
                      "Restaurants",
                      style: TextStyle(
                          color: selected == 1
                              ? Theme.of(context).primaryColor
                              : Theme.of(context).accentColor,
                          fontWeight: FontWeight.bold,
                          fontSize: 16),
                    ),
                  ),
                ),
              ),
            ),
          ]),
    );
  }

Answer 1

您可以使用switch语句和setstate：

class SampleWidget extends StatefulWidget {
  @override
  _SampleWidgetState createState() => _SampleWidgetState();
}

class _SampleWidgetState extends State<SampleWidget> {
  int _activeWidget = 1;
  Widget _body(){
    switch (_activeWidget) {
      case 1:
        return GestureDetector(
            onTap: (){
              setState(() {
                _activeWidget = 2;
              });
            },
            child: Container(
              color: Colors.blue,
              child: Text("I'm one"),
            )
        );
      case 2 :
        return GestureDetector(
            onTap: (){
              setState(() {
                _activeWidget = 0;
              });
            },
            child: Container(
              color: Colors.green,
              child: Text("I'm two"),
            )
        );
      default:
        return GestureDetector(
          onTap: (){
            setState(() {
              _activeWidget = 1;
            });
          },
            child: Container(
              color: Colors.red,
              child: Text("I'm zero"),
            )
        );
    }
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: _body(),
    );
  }
}

Answer 2

您可以使用标签栏 https://api.flutter.dev/flutter/material/TabBar-class.html并使用此https://mightytechno.com/style-tabs-in-flutter-app/

对其进行样式设置

颤抖改变身体含量

2 个答案: