【问题标题】:Not able to make Scrollable无法使可滚动
【发布时间】:2020-12-09 02:27:55
【问题描述】:

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

我尝试添加 Expanded 小部件、ListViews Widgets、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],
                  ),
                ],
              )),
        ],
      ));

【问题讨论】:

    标签: flutter flutter-layout flutter-listview flutter-pageview flutter-gridview


    【解决方案1】:

    您可以在下面复制粘贴运行完整代码
    第 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),
            ),
          );
        });
      }
    }
    

    【讨论】:

    • 感谢您的帮助。它真的帮助我理解了小部件的约束。
    【解决方案2】:

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

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

    【讨论】:

    • 我做了,但没有为我工作。感谢您的帮助和回答。
    猜你喜欢
    • 1970-01-01
    • 2018-05-23
    • 1970-01-01
    • 1970-01-01
    • 2022-12-09
    • 1970-01-01
    • 2016-05-15
    • 2019-07-28
    • 1970-01-01
    相关资源
    最近更新 更多