Question

如何将CarService设置为选中状态，如切换按钮选择状态？

如何使RaisedButton不加宽，即虾包裹标签文字。

Answer 1

我相信我已经设法在不使用49.189999 48.360001的情况下做同样的事情。

根据我的理解，您试图在第一个问题中让RaisedButton在两个案例之间切换，您可以通过在调用RaisedButton时在两个States之间切换来实现此目的。

但是，为了回答您的第二个问题，我使用的是onPressed而不是Container，此RaisedButton现在充当Container并且在点按时，它在状态之间切换。并且Button会将自己的大小调整为Container，child在我的示例中具有更改状态Text（String和Color值）

最后，为了使此Container与RaisedButton的新闻功能类似，我将其包裹在GestureDetector内，并控制onTap内的状态更改{1}}致电。

这是我的完整代码：

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
      home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  Color _myColor = Colors.green;
  String _myAccountState = "Account Enabled";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Manage Accounts"),
        centerTitle: true,
      ),
      body: new Center(
          child: new GestureDetector(
            child: new Container(
              decoration: new BoxDecoration(color: Colors.grey),
              child: new Text(
                _myAccountState, style: new TextStyle(color: _myColor),),
            ),
            onTap: () {
              setState(() {
                if (_myColor == Colors.green) {
                  _myAccountState = "Account Disabled";
                  _myColor = Colors.orange;
                }
                else {
                  _myAccountState = "Account Enabled";
                  _myColor = Colors.green;
                }
              });
            },

          )
      ),
    );
  }

}

PS：对于开关开关行为，您绝对可以使用RaisedButton并产生类似的行为，如下所示：

return new Scaffold(
      appBar: new AppBar(
        title: new Text("Manage Accounts"),
        centerTitle: true,
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            new Text(_myAccountState),
            new RaisedButton(
                child: new Text("Click Me"), color: _myColor, onPressed: () {
              setState(() {
                if (_myColor == Colors.green) {
                  _myAccountState = "Account Disabled";
                  _myColor = Colors.red;
                }
                else {
                  _myAccountState = "Account Enabled";
                  _myColor = Colors.green;
                }
              });
            })
          ],
        ),
      ),
    );

但是，我尝试将Container与GestureDetector一起使用的唯一原因是回答您的第二个问题，我不确定如何将shrinkWrap与RaisedButton一起使用。

Answer 2

为了重现“ 2状态按钮”，我个人使用AnimatedCrossFade在RaisedButton和OutlineButton之间切换。这样，状态可以直接在crossFadeState小部件的AnimatedCrossFade属性中处理。

这是一个小部件，您可以在任何需要的地方使用。设置宽度以避免不良的剪切效果。显示全文必须足够。由于它是一个无状态的小部件，因此，该小部件的用户负责更改状态。

class ToggleButton extends StatelessWidget {
  final selected, onChange, textSelected, textUnselected, width;

  ToggleButton({this.textSelected, this.textUnselected, this.selected, this.onChange, this.width = 150}) {}

  @override
  Widget build(BuildContext context) {
    return AnimatedCrossFade(
      duration: Duration(milliseconds: 200),
      crossFadeState: selected ? CrossFadeState.showFirst : CrossFadeState.showSecond,
      firstChild: Container(
        width: width,
        child: RaisedButton(
          child: Text(textSelected),
          onPressed: () {
            onChange(false);
          },
        ),
      ),
      secondChild: Container(
        width: width,
        child: OutlineButton(
          child: Text(textUnselected),
          onPressed: () {
            onChange(true);
          },
        ),
      ),
    );
  }
}

您可以简单地使用此小部件：

ToggleButton(
  textSelected: "Account enabled",
  textUnselected: "Account disabled",
  width: 150,
  selected: _accountEnabled,
  onChange: (value) {
    setState(() {
      _accountEnabled = value;
    });
  },
)

如何使Flutter RaisedButton选中状态

2 个答案: