如何在ListView内颤动地创建一行可滚动文本框或窗口小部件？ [英] how to create a row of scrollable text boxes or widgets in flutter inside a ListView?

问题描述

1。请，有人可以告诉我如何在ListView中创建一行文本框，这些文本框可以左右滚动。我可以看到我正在尝试在有限宽度Li​​stView中定义无限宽度。但是，无法找到任何解决方法。

1.Please, can someone tell me how to create a row of text boxes that are scrollable to left or right in flutter inside a ListView. I can see that I am trying to define an infinite width inside a finite width ListView. But, can't figure out any workaround for this one.

如果仅在customcrollview中注释scrolldirection属性（即，更改滚动方向），下面提到的代码就可以正常工作垂直）。但是，我正在寻找一个水平滚动。
我试图解决这个问题，但是没有运气。

the below-mentioned code works absolutely fine if simply comment the scrolldirection property in customscrollview(i.e., change the scrolldirection to vertical). But, i am looking for a horizontal scroll. I have tried to solve this but no luck.

有人可以帮忙，让我知道我做错了吗。

can someone please help and let me know where i am doing wrong.

1. 此外，我们如何像在Android中那样扑朔迷离地创建或膨胀布局？
   我已包含我正在创建的布局屏幕截图，以供参考：

我已在下面发布了代码以重现相同的错误；

I have posted the code below to reproduce the same error;

致谢，
Mahi

Regards, Mahi

  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
   import 'package:flutter/widgets.dart';
       void main(){
       runApp(new AddNewBlock());
       }

 class AddNewBlock extends StatefulWidget{

@override
State<StatefulWidget> createState() {
return new _AddNewBlockState();
    }
  }

   class _AddNewBlockState extends State<AddNewBlock>{


    @override
   Widget build(BuildContext context) {
   return new MaterialApp(
            title: 'Add New Block',
  debugShowCheckedModeBanner: false,

  home: new Scaffold(

    body: new ListView(
      shrinkWrap: true,

      children: <Widget>[
        new Container(
          margin: const EdgeInsets.only(
            left: 16.0,top: 24.0, bottom: 8.0,
          ),
          child: new Text(
            'Add New Block',
          style: new TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.bold,
            color: Colors.teal[300],
    ),
          ),
        ),
        new Container(
          margin: const EdgeInsets.only(left: 16.0, top: 16.0, bottom: 8.0),
          child: new Text ('Block Name'),
        ),

        new Container(
          margin: const EdgeInsets.fromLTRB(16.0, 8.0, 0.0, 8.0),
          child: new Text ('Block A1',
          style: new TextStyle(
            fontSize: 16.0,
            fontWeight: FontWeight.bold
          ),),
        ),
        new Divider(color: Colors.grey,),
        new Container(
          margin: const EdgeInsets.only(left: 16.0, top: 8.0,bottom: 8.0),
          child: new Text('NO. OF FLOORS',
          style: new TextStyle(
            fontSize: 12.0,
          ),
          ),
        ),



       new Container(
                    child: new Row(
                      children: <Widget>[
                        new Flexible(
                          child: new CustomScrollView(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            slivers: <Widget>[
                          new SliverPadding(
                          padding: const EdgeInsets.all(20.0),
                          sliver: new SliverList(
                            delegate: new SliverChildListDelegate(
                              <Widget>[
                                const Text('this'),
                                const Text('is'),
                                const Text('scroll'),
                                const Text('view'),
                                const Text('inside'),
                                const Text('list'),
                                const Text('view'),
                                const Text('in'),
                                const Text('horizontal'),
                                const Text('direction')
                              ],
                            ),
                          ),
                        ),
                      ],
                          ),
                        ),
                      ],
                    ),
                  ),





      ],

    ),
  ),


  );
   }
}

推荐答案

I认为这很简单，只要在水平 ListView 上放置一个固定高度的容器即可。但也许我不明白您的问题。如果这不起作用，请发布您的代码和错误消息。

I think this is straightforward as long as you put a container of fixed height on your horizontal ListView. But maybe I'm not understanding your question. Please post your code and the error message you're getting if this doesn't work.

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:collection';

void main() {
  runApp(new MaterialApp(home: new DemoApp()));
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Nested ListView Example')),
      body: new Center(
        child: new ListView(
          children: <Widget>[
            new Container(
              height: 80.0,
              child: new ListView(
                scrollDirection: Axis.horizontal,
                children: new List.generate(10, (int index) {
                  return new Card(
                    color: Colors.blue[index * 100],
                    child: new Container(
                      width: 50.0,
                      height: 50.0,
                      child: new Text("$index"),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这篇关于如何在ListView内颤动地创建一行可滚动文本框或窗口小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！