如何在颤动中调整用户操作的小部件大小

Question

我正在尝试制作一个高度选择器并使用图像以及高度数。当用户选择任何高度数时，我希望图像的大小根据所选的高度数增加或减少。

Answer 1

尝试如下：

  class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
   
  var items = [   
    200,
    300,
    400,
    
  ];
  var index=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test"),
      ),
      body: Column(
      children:[
        ListView.builder(
          shrinkWrap:true,
          itemCount:items.length,
        itemBuilder:(ctx,i){
          return TextButton(onPressed:(){
            setState((){
              index=i;
            });
          },child:Text(items[i].toString()));
        }
        ),
        Image.network("https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80",
                      height:items[index].toDouble()
                     ),
      ]
      )
    );
  }
}

Answer 2

请参考下面的代码示例

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController heightControl = TextEditingController();
  final ValueNotifier<double> height1 = ValueNotifier<double>(200);
  final ValueNotifier<double> _height2 = ValueNotifier<double>(120);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: AnimatedBuilder(
        animation: Listenable.merge([
          height1,
          _height2,
        ]),
        child: null,
        builder: (BuildContext context, _) {
          return Stack(
            children: <Widget>[
              Positioned(
                left: 30,
                right: 30,
                bottom: 10,
                child: Column(
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        height1.value = 80.0;
                      },
                      child: Container(
                        color: Colors.transparent,
                        height: height1.value,
                        child: Stack(
                          clipBehavior: Clip.none,
                          children: [
                            Image.network(
                              'https://images.stockfreeimages.com/2911/sfi226w/29118870.jpg',
                              fit: BoxFit.fill,
                              height: height1.value,
                            ),
                            Text(
                              "Current Height ${height1.value} \n Tap to reduce height",
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        _height2.value = 290.0;
                      },
                      child: Container(
                        color: Colors.orange,
                        height: _height2.value,
                        child: Stack(
                          clipBehavior: Clip.none,
                          children: [
                            Image.network(
                              'https://images.stockfreeimages.com/5439/sfi226w/54392167.jpg',
                              fit: BoxFit.fill,
                              height: _height2.value,
                            ),
                            Text(
                                'Current height : ${_height2.value} \n Tap to increase height'),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}