如何在Flutter中创建这样的元素？

Question

我想创建一个这样的元素。但是我还是很陌生。会有类似的东西吗？ 我需要按钮和文本框（我不知道它叫什么）具有状态，具体取决于它更改颜色的方式以及加号按钮的打开和关闭状态。文本在第一个和第二个文本框中更改，因此它们应该伸展。 *按钮和文本框仍需要移到右侧

Answer 1

这是一个有效的代码，您可以进一步更改大小和颜色以满足您的要求

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _numberCounter = 0;
  var _clickCounter = 0;
  var _changeColor = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Material(
            elevation: 6.0,
            child: Row(children: <Widget>[
              Container(
                padding: EdgeInsets.all(8),
                child: Text(
                  '$_numberCounter',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
              Container(
                color: _changeColor ? Colors.green : Colors.grey,
                padding: const EdgeInsets.all(8.0),
                child: GestureDetector(
                    onTap: () => setState(() {
                          _changeColor = !_changeColor;
                          _numberCounter++;
                          _clickCounter++;
                        }),
                    child: Icon(Icons.add), color: Colors.white),
              ),
              Expanded(
                child: Text(
                  '$_clickCounter per click',
                  style: TextStyle(fontSize: 20.0),
                  textAlign: TextAlign.center,
                ),
              )
            ]),
          ),
        ),
      ),
    );
  }
}