无法使滚动

Not able to make Scrollable

我是 flutter 的新手,我尝试制作可滚动的 UI。

我尝试添加 Expanded 小部件、ListViews 小部件、SingleChildScrollView 小部件,但没有得到预期的结果。

此外,我尝试将堆栈包装在 Container 中,然后再包装在 SingleChildScrollView 中。但它会抛出错误。

我尝试了很多方面来使我的主页可以滚动。但是,我遇到了错误(在下面提到)

I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#e1279 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

I/flutter (6259):抛出另一个异常:RenderBox 未布局:_RenderColoredBox#89cc6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter(6259):抛出另一个异常:RenderBox 未布局:RenderRepaintBoundary#9505f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter(6259):抛出另一个异常:'package:flutter/src/rendering/sliver_multi_box_adaptor.dart':断言失败:第 549 行 pos 12:'child.hasSize':不正确。

    GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
        new TextEditingController().clear();
      },
      child: Stack(
        children: <Widget>[
          Container(
            height: 200,
            child: TopBar(),
          ),
          Container(
            margin: EdgeInsets.only(top: 55),
            child: Text(
              "PriceTrackers",
              style: TextStyle(
                color: Colors.white,
                fontSize: 50.0,
                fontWeight: FontWeight.w900,
              ),
            ),
          ),
          Container(
              margin: EdgeInsets.fromLTRB(265, 0, 0, 0),
              child: Text(
                ".",
                style: TextStyle(
                  fontSize: 120,
                  color: Colors.white,
                ),
              )),
          ListView(
            padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 200),
                child: Form(
                    key: _formKey,
                    child: Column(children: <Widget>[
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Icon(Icons.store),
                            Text(
                              "Supported Store",
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.green,
                              ),
                            ),
                            Image.asset(
                              "Assets/img/amazon.png",
                              width: 20,
                            ),
                            Image.asset(
                              "Assets/img/flipkart.png",
                              width: 20,
                            ),
                            Image.asset(
                              "Assets/img/ajio.png",
                              width: 20,
                            ),
                            Image.asset(
                              "Assets/img/snapdeal.png",
                              width: 20,
                            ),
                            Image.asset(
                              "Assets/img/ss.jpg",
                              width: 20,
                            ),
                          ],
                        ),
                        margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.white,
                          // boxShadow: [
                          //   BoxShadow(color: Colors.white, spreadRadius: 3),
                          // ],
                        ),
                      ),

                      // Add TextFormFields and RaisedButton here.
                      TextFormField(
                        controller: _controller,
                        enableInteractiveSelection: true,
                        textInputAction: TextInputAction.done,

                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.green),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.black),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Colors.red,
                            ),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          hintText: "Enter Product URL",
                          suffixIcon: Icon(Icons.search),
                        ),
                        // onFieldSubmitted: (term){
                        //  FocusScope.of(context).unfocus();
                        // _controller.clear();

                        // },

                        showCursor: true,
                        autofocus: false,

                        // The validator receives the text that the user has entered.
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'Please enter some text';
                          } else if (!value.contains("amazon") ||
                              !value.contains("flipkart") ||
                              !value.contains("myntra")) {
                            return "Please Enter Supported Store URL";
                          }

                          return null;
                        },
                      ),

                      RaisedButton.icon(
                        icon: Icon(
                          Icons.search,
                          color: Colors.white,
                        ),
                        color: Colors.black,
                        padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                        elevation: 20.0,
                        onPressed: () async {
                          // Validate returns true if the form is valid, otherwise false.
                          if (_formKey.currentState.validate()) {
                            setState(() {
                              createAlbum(_controller.text).then((value) => {
                                    Navigator.push(
                                        context,
                                        EnterExitRoute(
                                            exitPage: HomePage(),
                                            enterPage: LineChartSample2(
                                                getData: value)))
                                  });
                            });

                            Scaffold.of(context).showSnackBar(SnackBar(
                              content: Text(
                                'Processing Data',
                                style: TextStyle(color: Colors.white),
                              ),
                              backgroundColor: Colors.green,
                            ));

                            // If the form is valid, display a snackbar. In the real world,
                            // you'd often call a server or save the information in a database.

                            // Navigator.push(
                            //           context,
                            //           MaterialPageRoute(builder: (context) => LineChartSample2()),
                            //         );
                          }
                        },
                        label: Text(
                          'View Price Graph',
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),

                      Container(
                        margin: EdgeInsets.only(top: 20),
                        width: 380,
                        height: 200,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: Colors.white,
                          boxShadow: [
                            BoxShadow(
                              color: Colors.blue[200],
                              blurRadius: 25.0, // soften the shadow
                              spreadRadius: 5.0, //extend the shadow
                              offset: Offset(
                                15.0, // Move to right 10  horizontally
                                15.0, // Move to bottom 10 Vertically
                              ),
                            )
                          ],
                        ),
                        child: Row(
                          children: <Widget>[
                            Container(
                              width: 130,
                              height: 130,
                              padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
                              child: FadeInImage(
                                fit: BoxFit.scaleDown,
                                // here `bytes` is a Uint8List containing the bytes for the in-memory image
                                placeholder: AssetImage("Assets/img/bag.png"),
                                image: NetworkImage(
                                    'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),
                              ),
                            ),
                            Expanded(
                                child: Container(
                              padding: EdgeInsets.fromLTRB(0, 20, 10, 0),
                              child: Column(
                                children: <Widget>[
                                  Text(
                                    "Redux Analogue Blue Dial Men’s &S... ",
                                    maxLines: 2,
                                    softWrap: true,
                                    style: TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.w400,
                                        color: Colors.black),
                                  ),
                                  Container(
                                      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                                      child: Column(
                                        children: <Widget>[
                                          OutlineButton.icon(
                                              onPressed: () => {},
                                              icon: Icon(Icons.shopping_basket),
                                              label: Text("But Now @28939")),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceEvenly,
                                            children: <Widget>[
                                              Text(
                                                "Avg Price : 7,98,374",
                                                style: TextStyle(
                                                  fontSize: 10,
                                                  fontWeight: FontWeight.w900,
                                                ),
                                              ),
                                              Text(
                                                "Avg Price :34,43,343",
                                                style: TextStyle(
                                                  fontSize: 10,
                                                  fontWeight: FontWeight.w900,
                                                ),
                                              )
                                            ],
                                          ),
                                          Container(
                                            margin: EdgeInsets.all(5),
                                          ),
                                          FlatButton.icon(
                                            icon: Icon(Icons.show_chart),
                                            color: Colors.black,
                                            textColor: Colors.white,
                                            disabledColor: Colors.grey,
                                            disabledTextColor: Colors.black,
                                            padding: EdgeInsets.fromLTRB(
                                                20, 5, 20, 5),
                                            splashColor: Colors.blueAccent,
                                            onPressed: () {
                                              /*...*/
                                            },
                                            label: Text(
                                              "Show Price Graph",
                                              style: TextStyle(fontSize: 15.0),
                                            ),
                                          )
                                        ],
                                      )),
                                ],
                              ),
                            ))
                          ],
                        ),
                      ),
                    ])),
              ),
            ],
          ),
          Container(
              margin: EdgeInsets.only(top: 650),
              child: GridView.count(
                primary: false,
                padding: const EdgeInsets.all(20),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                crossAxisCount: 2,
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text("He'd have you all unravel at the"),
                    color: Colors.teal[100],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Heed not the rabble'),
                    color: Colors.teal[200],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Sound of screams but the'),
                    color: Colors.teal[300],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Who scream'),
                    color: Colors.teal[400],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Revolution is coming...'),
                    color: Colors.teal[500],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Revolution, they...'),
                    color: Colors.teal[600],
                  ),
                ],
              )),
        ],
      ));

您需要从容器中删除高度。

SingleChildScrollView(
  child: Container(
    child: Stack(
      children: <Widget>[
])))

您可以复制粘贴运行下面的完整代码
第 1 步:使用 LayoutBuilderConstrainedBox

return LayoutBuilder(builder: (context, constraints) {
 ...
        child: SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(maxHeight: double.infinity),
            child: Stack(

第 2 步:将 ListView 更改为 Column

Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
          child: Column(

第 3 步:GridView 使用 shrinkWrap: true

工作演示

完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: GestureDetector(
            onTap: () {
              FocusScope.of(context).unfocus();
              TextEditingController().clear();
            },
            child: SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: double.infinity),
                child: Stack(
                  children: <Widget>[
                    Container(
                      height: 200,
                      child: Text("TopBar()"),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 55),
                      child: Text(
                        "PriceTrackers",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 50.0,
                          fontWeight: FontWeight.w900,
                        ),
                      ),
                    ),
                    Container(
                        margin: EdgeInsets.fromLTRB(265, 0, 0, 0),
                        child: Text(
                          ".",
                          style: TextStyle(
                            fontSize: 120,
                            color: Colors.white,
                          ),
                        )),
                    Padding(
                      padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                      child: Column(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(top: 200),
                            child: Form(
                                //key: _formKey,
                                child: Column(children: <Widget>[
                              Container(
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Icon(Icons.store),
                                    Text(
                                      "Supported Store",
                                      style: TextStyle(
                                        fontSize: 20,
                                        color: Colors.green,
                                      ),
                                    ),
                                    Image.network(
                                      'https://picsum.photos/250?image=9',
                                      width: 20,
                                    ),
                                    Image.network(
                                      'https://picsum.photos/250?image=10',
                                      width: 20,
                                    ),
                                    Image.network(
                                      'https://picsum.photos/250?image=11',
                                      width: 20,
                                    ),
                                    Image.network(
                                      'https://picsum.photos/250?image=12',
                                      width: 20,
                                    ),
                                    Image.network(
                                      'https://picsum.photos/250?image=13',
                                      width: 20,
                                    ),
                                  ],
                                ),
                                margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: Colors.white,
                                  // boxShadow: [
                                  //   BoxShadow(color: Colors.white, spreadRadius: 3),
                                  // ],
                                ),
                              ),

                              // Add TextFormFields and RaisedButton here.
                              TextFormField(
                                //controller: _controller,
                                enableInteractiveSelection: true,
                                textInputAction: TextInputAction.done,

                                decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.green),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.black),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.blue),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  errorBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      color: Colors.red,
                                    ),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  hintText: "Enter Product URL",
                                  suffixIcon: Icon(Icons.search),
                                ),
                                // onFieldSubmitted: (term){
                                //  FocusScope.of(context).unfocus();
                                // _controller.clear();

                                // },

                                showCursor: true,
                                autofocus: false,

                                // The validator receives the text that the user has entered.
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return 'Please enter some text';
                                  } else if (!value.contains("amazon") ||
                                      !value.contains("flipkart") ||
                                      !value.contains("myntra")) {
                                    return "Please Enter Supported Store URL";
                                  }

                                  return null;
                                },
                              ),

                              RaisedButton.icon(
                                icon: Icon(
                                  Icons.search,
                                  color: Colors.white,
                                ),
                                color: Colors.black,
                                padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                elevation: 20.0,
                                onPressed: () async {
                                  // Validate returns true if the form is valid, otherwise false.
                                },
                                label: Text(
                                  'View Price Graph',
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                              ),

                              Container(
                                margin: EdgeInsets.only(top: 20),
                                width: 380,
                                height: 200,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(20),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.blue[200],
                                      blurRadius: 25.0,
                                      // soften the shadow
                                      spreadRadius: 5.0,
                                      //extend the shadow
                                      offset: Offset(
                                        15.0,
                                        // Move to right 10  horizontally
                                        15.0, // Move to bottom 10 Vertically
                                      ),
                                    )
                                  ],
                                ),
                                child: Row(
                                  children: <Widget>[
                                    Container(
                                      width: 130,
                                      height: 130,
                                      padding:
                                          EdgeInsets.fromLTRB(5, 10, 5, 10),
                                      child: FadeInImage(
                                        fit: BoxFit.scaleDown,
                                        // here `bytes` is a Uint8List containing the bytes for the in-memory image
                                        placeholder: NetworkImage(
                                            "https://picsum.photos/250?image=9"),
                                        image: NetworkImage(
                                            'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),
                                      ),
                                    ),
                                    Expanded(
                                        child: Container(
                                      padding:
                                          EdgeInsets.fromLTRB(0, 20, 10, 0),
                                      child: Column(
                                        children: <Widget>[
                                          Text(
                                            "Redux Analogue Blue Dial Men’s &S... ",
                                            maxLines: 2,
                                            softWrap: true,
                                            style: TextStyle(
                                                fontSize: 20,
                                                fontWeight: FontWeight.w400,
                                                color: Colors.black),
                                          ),
                                          Container(
                                              margin: EdgeInsets.fromLTRB(
                                                  0, 10, 0, 0),
                                              child: Column(
                                                children: <Widget>[
                                                  OutlineButton.icon(
                                                      onPressed: () => {},
                                                      icon: Icon(Icons
                                                          .shopping_basket),
                                                      label: Text(
                                                          "But Now @28939")),
                                                  Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .spaceEvenly,
                                                    children: <Widget>[
                                                      Text(
                                                        "Avg Price : 7,98,374",
                                                        style: TextStyle(
                                                          fontSize: 10,
                                                          fontWeight:
                                                              FontWeight.w900,
                                                        ),
                                                      ),
                                                      Text(
                                                        "Avg Price :34,43,343",
                                                        style: TextStyle(
                                                          fontSize: 10,
                                                          fontWeight:
                                                              FontWeight.w900,
                                                        ),
                                                      )
                                                    ],
                                                  ),
                                                  Container(
                                                    margin: EdgeInsets.all(5),
                                                  ),
                                                  FlatButton.icon(
                                                    icon:
                                                        Icon(Icons.show_chart),
                                                    color: Colors.black,
                                                    textColor: Colors.white,
                                                    disabledColor: Colors.grey,
                                                    disabledTextColor:
                                                        Colors.black,
                                                    padding:
                                                        EdgeInsets.fromLTRB(
                                                            20, 5, 20, 5),
                                                    splashColor:
                                                        Colors.blueAccent,
                                                    onPressed: () {
                                                      /*...*/
                                                    },
                                                    label: Text(
                                                      "Show Price Graph",
                                                      style: TextStyle(
                                                          fontSize: 15.0),
                                                    ),
                                                  )
                                                ],
                                              )),
                                        ],
                                      ),
                                    ))
                                  ],
                                ),
                              ),
                            ])),
                          ),
                        ],
                      ),
                    ),
                    Container(
                        margin: EdgeInsets.only(top: 650),
                        child: GridView.count(
                          shrinkWrap: true,
                          primary: false,
                          padding: const EdgeInsets.all(20),
                          crossAxisSpacing: 10,
                          mainAxisSpacing: 10,
                          crossAxisCount: 2,
                          children: <Widget>[
                            Container(
                              padding: const EdgeInsets.all(8),
                              child: const Text(
                                  "He'd have you all unravel at the"),
                              color: Colors.teal[100],
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              child: const Text('Heed not the rabble'),
                              color: Colors.teal[200],
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              child: const Text('Sound of screams but the'),
                              color: Colors.teal[300],
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              child: const Text('Who scream'),
                              color: Colors.teal[400],
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              child: const Text('Revolution is coming...'),
                              color: Colors.teal[500],
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              child: const Text('Revolution, they...'),
                              color: Colors.teal[600],
                            ),
                          ],
                        )),
                  ],
                ),
              ),
            )),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
    });
  }
}