1.请,有人可以告诉我如何创建文本框是滚动向左或向右在ListView里面扑一行。我可以看到,我试图定义一个有限宽度的ListView里面无限的宽度。但是,想不通这一个任何解决办法。
下面提到的代码工作绝对没问题,如果简单地评论中customscrollview的scrolldirection属性(即,改变scrolldirection垂直)。但是,我要寻找一个水平滚动。我试图解决这一点,但没有运气。
可有人请帮助,让我知道我做错了。
我已经发布下面的代码重现同样的错误;
问候,马希
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')
],
),
),
),
],
),
),
],
),
),
],
),
),
);
}
}
我觉得这很简单,只要你把固定高度的容器上的水平ListView
。但是,也许我不理解你的问题。请发表您的代码,如果这不起作用您收到错误消息。
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()),
);
},
),
),
],
);
}
注意:为了简单起见,我没有在一个单一的Widget重构两个ListView
我已成功地做到这一点,通过使用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)),
],
);
},
));
}
}
不要忘记设置scrollDirection
财产Axis.horizontal
,因为它默认为vertical
值。