颤振位置固定等效

Question

是否可以在屏幕中修复一个不管滚动而保持固​​定的对象？

类似于固定CSS位置的东西。

Answer 1

您可以使用Stack小部件绝对定位Positioned窗口小部件的子项。

下面的最小示例将红色框放在列表视图上方，方法是将子项放在 Stack的子项中的ListView后的定位小部件中。

List<String> todos = [...];
return new Stack(
  children: <Widget>[
    new ListView(
     children: todos
       .map((todo) => new ListTile(title: new Text(todo)))
       .toList(),
     ),
     new Positioned(
       left: 30.0,
       top: 30.0,
       child: new Container(
         width: 100.0,
         height: 80.0,
         decoration: new BoxDecoration(color: Colors.red),
         child: new Text('hello'),
        )
      ),
   ],
);

这里是Scaffold身体内部。如果您添加更多项目，您会发现列表滚动而不移动红色框。

Answer 2

您可以在Positioned窗口小部件中使用Stack窗口小部件和AspectRatio窗口小部件，并使用％距离，如下面的代码。

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; //get the screen size

List<String> todos = [...];

//the below if to get the aspect ratio of the screen i am using the app only in landscape
//if you need to use it in portrait you should add the sizes below
if((size.width / size.height) > 1.76){
  aspect = 16 / 9;
}else if((size.width / size.height) < 1.77 && (size.width / size.height) >= 1.6){
  aspect = 16 / 10;
}else{
  aspect = 4 /3;
}

return new Scaffold(
  body: new Center(
      //layoutBuilder i can use the constraints to get the width and height of the screen
      child: new LayoutBuilder(builder: (context, constraints) {
        return new AspectRatio(
          aspectRatio: aspect,
          child: new Column(
            children: <Widget>[
               new ListView(
                    children: todos
                    .map((todo) => new ListTile(title: new Text(todo)))
                    .toList(),
               ),
               new Positioned(
                    //constraints.biggest.height to get the height 
                    // * .05 to put the position top: 5%
                    top: constraints.biggest.height * .05,
                    left: constraints.biggest.width * .30,
                    child: new Container(
                              width: 100.0,
                              height: 80.0,
                              decoration: new BoxDecoration(color: Colors.red),
                              child: new Text('hello'),
                          ),
                    ),
            ],
          ),
        ),
      }),
    ),
  );
}
}

希望它能帮到你......