Dart 如何在ListView中创建一行可滚动的文本框或窗口小部件？_Dart_Flutter

Dart 如何在ListView中创建一行可滚动的文本框或窗口小部件？

dart flutter

Dart 如何在ListView中创建一行可滚动的文本框或窗口小部件？,dart,flutter,Dart,Flutter,1.请问，有人能告诉我如何在ListView中创建一行文本框，这些文本框可以在Flatter中向左或向右滚动。我可以看到，我试图在有限宽度列表视图中定义一个无限宽度。但是，我想不出解决这个问题的办法如果只需在customscrollview中注释scrolldirection属性（即，将scrolldirection更改为垂直），下面提到的代码就可以正常工作。但是，我正在寻找一个水平卷轴。我试图解决这个问题，但没有运气谁能帮我一下，让我知道我哪里做错了此外，我们如何才能像在《颤振》中的A

1.请问，有人能告诉我如何在ListView中创建一行文本框，这些文本框可以在Flatter中向左或向右滚动。我可以看到，我试图在有限宽度列表视图中定义一个无限宽度。但是，我想不出解决这个问题的办法

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

谁能帮我一下，让我知道我哪里做错了

此外，我们如何才能像在《颤振》中的Android那样创建或膨胀布局？我已经包括了我正在创建的布局的屏幕截图，以供参考：

我已经发布了下面的代码来重现相同的错误

问候,，马希

导入“包装：颤振/材料.省道”；
导入“package:flatter/rendering.dart”；
导入“package:flatter/widgets.dart”；
void main（）{
runApp（newaddnewblock（））；
}
类AddNewBlock扩展StatefulWidget{
@凌驾
状态createState（）{
返回新的_AddNewBlockState（）；
}
}
类_AddNewBlockState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“添加新块”，
debugShowCheckedModeBanner:false，
家：新脚手架(
正文：新列表视图(
收缩膜：对，
儿童：[
新容器(
边距：仅限常量边集(
左：16.0，上：24.0，下：8.0，
),
儿童：新文本(
“添加新块”，
样式：新文本样式(
字体大小：18.0，
fontWeight:fontWeight.bold，
颜色：Colors.teal[300]，
),
),
),
新容器(
边距：仅限常量边集（左：16.0，上：16.0，下：8.0），
子项：新文本（“块名”），
),
新容器(
边距：LTRB（16.0,8.0,0.0,8.0）的常数边集，
子项：新文本（'块A1'，
样式：新文本样式(
字体大小：16.0，
fontWeight:fontWeight.bold
),),
),
新的分隔器（颜色：颜色。灰色，），
新容器(
边距：仅限常量边集（左：16.0，顶部：8.0，底部：8.0），
子项：新文本（“楼层数”，
样式：新文本样式(
字体大小：12.0，
),
),
),
新容器(
孩子：新的一排(
儿童：[
新柔性(
子项：新自定义滚动视图(
收缩膜：对，
滚动方向：轴水平，
条子：[
新型轧棉机(
填充：常数边集全部（20.0），
银条：新银条列表(
委托：新建SliverChildListDelegate(
[
常量文本（“this”），
常量文本（'is'），
常量文本（“滚动”），
常量文本（“视图”），
常量文本（“内部”），
常量文本（“列表”），
常量文本（“视图”），
常量文本（'in'），
常量文本（“水平”），
常量文本（'方向'）
],
),
),
),
],
),
),
],
),
),
],
),
),
);
}
}

我通过使用

ListView.builder（）成功地做到了这一点。

以下是完整的代码：

import 'package:flutter/material.dart';


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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Scroll on the Horizon"),
          centerTitle: true,
        ),
        body: new ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return new Row(
              children: <Widget>[
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),

              ],

            );
          },


        ));
  }

}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（新材料）PP(
主页：新MyApp（））；
}
类MyApp扩展了StatefulWidget{
@凌驾
状态createState（）{
返回新的_MyAppState（）；
}
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：新文本（“地平线上的滚动”），
标题：对，
),
正文：新建ListView.builder(
滚动方向：轴水平，
itemBuilder:（构建上下文，int索引）{
返回新行(
儿童：[
新文本（“Let”，样式：新文本样式（颜色：Colors.blue），），
新文本（“我”，样式：新文本样式（颜色：Colors.red）），
新文本（“滚动”，样式：新文本样式（颜色：Colors.green）），
新文本（“水平”，
样式：新文本样式（颜色：Colors.orange）），
新文本（“Let”，样式：新文本样式（颜色：Colors.blue），），
新文本（“我”，样式：新文本样式（颜色：Colors.red）），
新文本（“滚动”，样式：新文本样式（颜色：Colors.green）），
新文本（“水平”，
样式：新文本样式（颜色：Colors.orange）），
新文本（“Let”，样式：新文本样式（颜色：Colors.blue），），
新文本（“我”，样式：新文本样式（颜色：Colors.red）），
新文本（“滚动”，样式：新文本样式（颜色：Colors.green）），
新文本（“水平”，
样式：新文本样式（颜色：Colors.orange）），
新文本（“Let”，样式：新文本样式（颜色：Colors.blue），），
新文本（“我”，样式：新文本样式（颜色：Colors.red）），
新文本（“滚动”，样式：新文本样式（颜色：Colors.green）），
import 'package:flutter/material.dart';


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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Scroll on the Horizon"),
          centerTitle: true,
        ),
        body: new ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return new Row(
              children: <Widget>[
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),
                new Text("Let ", style: new TextStyle(color: Colors.blue),),
                new Text("me ", style: new TextStyle(color: Colors.red)),
                new Text("scroll ", style: new TextStyle(color: Colors.green)),
                new Text("horizontally ",
                    style: new TextStyle(color: Colors.orange)),

              ],

            );
          },


        ));
  }

}

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"),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Text("Debilidades",
    style: TextStyle(fontWeight: FontWeight.bold)),
SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
  child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: pokemon.weaknesses == null
          ? <Widget>[
              Text(
                "No tiene debilidades",
                style: TextStyle(color: Colors.grey),
              )
            ]
          : pokemon.weaknesses
              .map((weakness) => FilterChip(
                  backgroundColor: Colors.red,
                  label: Text(
                    weakness,
                    style: TextStyle(color: Colors.white),
                  ),

                  onSelected: (b) {}))
              .toList()),
),

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      SizedBox( // Horizontal ListView
        height: 100,
        child: ListView.builder(
          itemCount: 20,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            return Container(
              width: 100,
              alignment: Alignment.center,
              color: Colors.blue[(index % 9) * 100],
              child: Text(index.toString()),
            );
          },
        ),
      ),
      SizedBox( // Vertical ListView
        height: 200,
        child: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return Container(
              width: 50,
              height: 50,
              alignment: Alignment.center,
              color: Colors.orange[(index % 9) * 100],
              child: Text(index.toString()),
            );
          },
        ),
      ),
    ],
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "Nested ListView List";

    List<Choice> choices = const <Choice>[
      const Choice(
          title: 'MacBook Pro',
          date: '1 June 2019',
          description:
          'MacBook Pro (sometimes abbreviated as MBP) is a line of Macintosh portable computers introduced in January 2006 by Apple Inc.',
          imglink:
          'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'),
      const Choice(
          title: 'MacBook Air',
          date: '1 June 2016',
          description:
          'MacBook Air is a line of laptop computers developed and manufactured by Apple Inc. It consists of a full-size keyboard, a machined aluminum case, and a thin light structure.',
          imglink:
          'https://images.unsplash.com/photo-1499673610122-01c7122c5dcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'),
      const Choice(
          title: 'iMac',
          date: '1 June 2019',
          description:
          'iMac is a family of all-in-one Macintosh desktop computers designed and built by Apple Inc. It has been the primary part of Apple consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms.',
          imglink:
          'https://images.unsplash.com/photo-1517059224940-d4af9eec41b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'),
      const Choice(
          title: 'Mac Mini',
          date: '1 June 2017',
          description:
          'Mac mini (branded with lowercase "mini") is a desktop computer made by Apple Inc. One of four desktop computers in the current Macintosh lineup, along with the iMac, Mac Pro, and iMac Pro, it uses many components usually featured in laptops to achieve its small size.',
          imglink:
          'https://www.apple.com/v/mac-mini/f/images/shared/og_image__4mdtjbfhcduu_large.png?201904170831'),
      const Choice(
          title: 'Mac Pro',
          date: '1 June 2018',
          description:
          'Mac Pro is a series of workstation and server computer cases designed, manufactured and sold by Apple Inc. since 2006. The Mac Pro, in most configurations and in terms of speed and performance, is the most powerful computer that Apple offers.',
          imglink:
          'https://i0.wp.com/9to5mac.com/wp-content/uploads/sites/6/2017/01/mac-pro-2-concept-image.png?resize=1000%2C500&quality=82&strip=all&ssl=1'),
    ];

    return MaterialApp(
        title: title,
        home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body:
            ListView(
                children: [
                  Container(
                    height: 300.0,
                    child: ListView(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        padding: const EdgeInsets.all(20.0),
                        children: List.generate(choices.length, (index) {
                          return Center(
                            child: ChoiceCard(
                                choice: choices[index], item: choices[index]),
                          );
                        })),
                  ),
                  Container(
                    height: 300.0,

                    child: ListView(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        padding: const EdgeInsets.all(20.0),
                        children: List.generate(choices.length, (index) {
                          return Center(
                            child: ChoiceCard(
                                choice: choices[index], item: choices[index]),
                          );
                        })),
                  ),
                  Container(
                    height: 300.0,

                    child: ListView(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        padding: const EdgeInsets.all(20.0),
                        children: List.generate(choices.length, (index) {
                          return Center(
                            child: ChoiceCard(
                                choice: choices[index], item: choices[index]),
                          );
                        })),
                  ),
                ])));
  }
}

class Choice {
  final String title;
  final String date;
  final String description;
  final String imglink;

  const Choice({this.title, this.date, this.description, this.imglink});
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard(
      {Key key,
        this.choice,
        this.onTap,
        @required this.item,
        this.selected: false})
      : super(key: key);

  final Choice choice;
  final VoidCallback onTap;
  final Choice item;
  final bool selected;

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = Theme.of(context).textTheme.display1;
    if (selected)
      textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);
    return Card(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            new Expanded(
                child: Container(
                  width: 260.0,
                  height: 260.0,
                  child: Image.network(choice.imglink),
                )),
            new Container(
              width: 260.0,
              padding: const EdgeInsets.all(10.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(choice.title, style: Theme.of(context).textTheme.title),
                  Text(choice.date,
                      style: TextStyle(color: Colors.black.withOpacity(0.5))),
                  Text(choice.description),
                ],
              ),
            )
          ],
          crossAxisAlignment: CrossAxisAlignment.start,
        ));
  }
}

SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
        children: [
            //provide all the things u want to horizontally scroll here
        ]
    ),
);

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: List.generate(20, (x) => _listItem(x.toString()))
      .toList())),

e.g
List<UserModel> _list;
SingleChildScrollView(
   scrollDirection: Axis.horizontal,
   child: Row(
     children: _list.map((e) => _listItem(e.firstName)).toList())),

Container(
  height:50,// requires a finite vertical height  
  child: ListView.builder(
    itemCount: 50,
    scrollDirection: Axis.horizontal,
    itemBuilder: (_, index) => _listItem(index.toString())),
),

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 50), // requires vertical bounded height
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: List.generate(20, (x) => _listItem(x.toString()))
      .toList()),
),