flutter - 如何在 Flutter 中滚动时将容器固定在顶部

Question

当我的卡在滚动时交叉时，我想将我的第一个容器修复在顶部

这是我的代码：

return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          new SizedBox(height: 25.0,),
          new Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new Text("Top Fix",style: TextStyle(fontSize: 20.0)),
                new SizedBox(width: 30.0,),
                new CircleAvatar(
                  backgroundColor: Colors.white,
                  radius: 25.0,
                  child: Text("A"),
                ),
              ],
            ),
            color: Colors.orange,
          ),
          new Container(
            height: 200.0,
            width: double.infinity,
            child: Container(
              margin: EdgeInsets.only(top: 40.0),
              child: Text(
                "Welcome To \n Flutter",
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white),
              ),
            ),
            decoration: BoxDecoration(
                borderRadius: new BorderRadius.only(
                  bottomLeft: new Radius.circular(50.0),
                  bottomRight: new Radius.circular(50.0),
                ),
                color: Colors.orange),
          ),
          new Container(
            margin: EdgeInsets.only(left: 10.0, right: 10.0),
            transform: Matrix4.translationValues(0.0, -40.0, 0.0),
            child: new Card(
              clipBehavior: Clip.antiAlias,
              color: Colors.orange[300],
              child: Row(
                children: [
                  new Container(
                    margin: EdgeInsets.all(5.0),
                    child: CircleAvatar(
                      backgroundColor: Colors.white,
                      radius: 25.0,
                      child: Text("A"),
                    ),
                  ),
                  new Container(
                      child: Column(
                    children: [
                      new Text(
                        "Hello Every One This is Flutter Tutorial",
                        style: TextStyle(color: Colors.white),
                      ),
                      new Container(
                          child: Row(
                        children: [
                          new FlatButton(
                              onPressed: () {},
                              textColor: Colors.white,
                              child: Text("Button 1")),
                          new FlatButton(
                              onPressed: () {},
                              textColor: Colors.white,
                              child: Text("Button 1")),
                        ],
                      )),
                    ],
                  )),
                ],
              ),
              elevation: 2.0,
            ),
          ),
          new Card(
            clipBehavior: Clip.antiAlias,
            color: Colors.grey[200],
            child: Container(
              height: 200.0,
              width: double.infinity,
              child: Text("Card 1"),
            ),
          ),
          new SizedBox(
            height: 40,
          ),
          new Card(
            clipBehavior: Clip.antiAlias,
            color: Colors.grey[200],
            child: Container(
              height: 200.0,
              width: double.infinity,
              child: Text("Card 2"),
            ),
          ),
          new SizedBox(
            height: 40,
          ),
          new Card(
            clipBehavior: Clip.antiAlias,
            color: Colors.grey[200],
            child: Container(
              height: 200.0,
              width: double.infinity,
              child: Text("Card 3"),
            ),
          ),
        ],
      ),
      // ),
    );

我想修复我的第一个容器并将我的颜色从橙色更改为绿色。

标签： flutterdart

Answer 1

您可以像这样使用堆栈：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final double heightOfFirstContainer = 100.0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        children: [
          Scaffold(
            backgroundColor: Colors.green,
            body: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    height: heightOfFirstContainer,
                  ),
                  new Container(
                    height: 200.0,
                    width: double.infinity,
                    child: Container(
                      margin: EdgeInsets.only(top: 40.0),
                      child: Text(
                        "Welcome To \n Flutter",
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    decoration: BoxDecoration(
                        borderRadius: new BorderRadius.only(
                          bottomLeft: new Radius.circular(50.0),
                          bottomRight: new Radius.circular(50.0),
                        ),
                        color: Colors.orange),
                  ),
                  new Container(
                    margin: EdgeInsets.only(left: 10.0, right: 10.0),
                    transform: Matrix4.translationValues(0.0, -40.0, 0.0),
                    child: new Card(
                      clipBehavior: Clip.antiAlias,
                      color: Colors.orange[300],
                      child: Row(
                        children: [
                          new Container(
                            margin: EdgeInsets.all(5.0),
                            child: CircleAvatar(
                              backgroundColor: Colors.white,
                              radius: 25.0,
                              child: Text("A"),
                            ),
                          ),
                          new Container(
                              child: Column(
                            children: [
                              new Text(
                                "Hello Every One This is Flutter Tutorial",
                                style: TextStyle(color: Colors.white),
                              ),
                              new Container(
                                  child: Row(
                                children: [
                                  new FlatButton(
                                      onPressed: () {},
                                      textColor: Colors.white,
                                      child: Text("Button 1")),
                                  new FlatButton(
                                      onPressed: () {},
                                      textColor: Colors.white,
                                      child: Text("Button 1")),
                                ],
                              )),
                            ],
                          )),
                        ],
                      ),
                      elevation: 2.0,
                    ),
                  ),
                  new Card(
                    clipBehavior: Clip.antiAlias,
                    color: Colors.grey[200],
                    child: Container(
                      height: 200.0,
                      width: double.infinity,
                      child: Text("Card 1"),
                    ),
                  ),
                  new SizedBox(
                    height: 40,
                  ),
                  new Card(
                    clipBehavior: Clip.antiAlias,
                    color: Colors.grey[200],
                    child: Container(
                      height: 200.0,
                      width: double.infinity,
                      child: Text("Card 2"),
                    ),
                  ),
                  new SizedBox(
                    height: 40,
                  ),
                  new Card(
                    clipBehavior: Clip.antiAlias,
                    color: Colors.grey[200],
                    child: Container(
                      height: 200.0,
                      width: double.infinity,
                      child: Text("Card 3"),
                    ),
                  ),
                ],
              ),
              // ),
            ),
          ),
          Positioned(
            child: new Container(
              height: heightOfFirstContainer,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  new Text("Top Fix", style: TextStyle(fontSize: 20.0)),
                  new SizedBox(
                    width: 30.0,
                  ),
                  new CircleAvatar(
                    backgroundColor: Colors.white,
                    radius: 25.0,
                    child: Text("A"),
                  ),
                ],
              ),
              color: Colors.orange,
            ),
          ),
        ],
      ),
    );
  }
}