根据Flutter的滚动位置改变容器的宽度。

Question

我试图根据SingleChildScrollView的滚动位置动态地改变一个容器的宽度。这是我尝试处理这个问题的方法。

...
Container(
     width: 20.0 + position,
     height: deviceHeight*10,
     child: Container(
        decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(25.0),
           color: Color(0xf7f7f7f7).withOpacity(1),
        ),
     ),
   ),

   NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
            if (scrollNotification is ScrollUpdateNotification) {
                if (scrollNotification.metrics.pixels < 300){
                    setState(() {
                       position = scrollNotification.metrics.pixels;
                       //topPosition = deviceHeight*47 - position;
                       print(position);
                    });
                }
            }
            return true;
         },
         child: Positioned(
            top: deviceHeight*47,
            width: deviceWidth*100,
            height: deviceHeight*50,
            child: Container(
               decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  color: Color(0xf7f7f7f7).withOpacity(1),
            ),

            child: SingleChildScrollView(
               child: Container(
                  padding: EdgeInsets.only(left: deviceWidth*7, top: deviceHeight*4),
                  child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
                                      ...

我正在打印滚动位置，它完全正确，但它对容器的宽度没有影响。

所有这些widget都在堆栈widget下。

我做错了什么？

先谢谢您的支持

Sergi

Answer 1

我做了一个测试来模拟你所测试的是这样的，看看是否有助于解决你的问题。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyAppState extends State<MyHomePage> {

  double size;
  @override
  void initState() {
    super.initState();

    setState(() {
      size = 100;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold (
        body: NotificationListener<ScrollNotification>(
          onNotification: (scrollNotification) {
            setState(() {
              if (scrollNotification.metrics.pixels > 300) {
                size = scrollNotification.metrics.pixels;
              }
            });
            return true;
          },
          child:SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: 600,
                  color: Colors.redAccent,
                ),
                Container(
                  color: Colors.black38,
                  width: size,
                  height: size,
                ),
                Container(
                  height: 600,
                  color: Colors.blueAccent,
                ),
                Container(
                  height: 600,
                  color: Colors.yellowAccent,
                ),
              ],
            ),
          )
        )
    );
  }
}