Question

您好，我正在开发一个用户上传图片的项目，我希望当用户点击图片时，它会在全屏和屏幕中心变大，我该如何实现？

这是我的代码：

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

class _MyAppState extends State<MyApp> {
  String _mySelection;
  String _text = "Choose";
   List<Map> _myJson = [
    {"id": "ID 1310012", "name": "Newcommer"}, {"id": "ID 0000TEMP", "name": "Temp"}];

  Widget _children() {
    TextEditingController _controller = new TextEditingController(text: _text);
    return  new Expanded(child: new ListView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            children: <Widget>[
              new Container (
        child: new Row(
                  children: <Widget>[
                    new Expanded(
                      child: new TextField(
                        controller: _controller,
                      ),
                    ),
                    new DropdownButton(
                      isDense: true,
                      value: _mySelection,
                      items: _myJson.map((Map map) {
                        return new DropdownMenuItem<String>(
                          value: map["id"],
                          child: new Text(
                            map["name"],
                          ),
                        );
                      }).toList(),
                      onChanged: (String newValue) {
                        setState(() {
                          _mySelection = newValue;
                          _text = newValue;
                        });
                      })
              ],),),
              new RaisedButton(
                  child: new Text('Start'), onPressed: null),

            ]
        ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Test")),
      body:  new Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
           _children(),
        ],
      ),
    );
  }
}

Answer 1

您可以使用position: fixed;使元素相对于视点位置。

然后使用top: 50%; left: 50%; transform: translate(-50%, -50%);将其居中。（这会将左上角定位在屏幕中间，但随后相对于图像大小将其移动-50％， - 50％，然后居中。）

要更改状态，只需为正常位置创建一个CSS选择器，然后居中并通过JS切换第二个类。（使用element.classList.toggle("centeredStyle");）

请注意，由于您将图片的位置从可能的静态更改为固定，这将重新排列其他元素（因为position: fixed;的元素不会占用空间）。要停止它，您可以简单地包装所有图像，并始终调整包装器的大小而不是图像本身。

当点击图像时，它变得更大并且在屏幕的中心

1 个答案: