我在一个Column小部件的顶部有一个图像,之后有一个标题是Text小部件,之后,还有一个Text小部件包含一些描述,超出了屏幕并给出了渲染错误。 / p>
所以我想让文本视图可滚动,这样它应该完全可见并且可以滚动。它的大小必须是动态的,因为来自API的数据。 我尝试了很少的方法,但无法完成。 这是截图
截图:
@override
Widget build(BuildContext context) {
var size = MediaQuery
.of(context)
.size;
final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
final double itemWidth = size.width;
return new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
child: new Image.asset(
'assets/img/noconnection.png',
height: 200.0,
width: itemWidth,
),
),
new Padding(
padding: const EdgeInsets.all(12.0),
child: new Text(
"Some Heading Text",
style: new TextStyle(
fontSize: 28.0,
color: Colors.black87,
fontWeight: FontWeight.w600),
),
),
new SingleChildScrollView(
child: new Text(
"Description that is too long in text format(Here Data is coming from API)",
style: new TextStyle(
fontSize: 16.0, color: Colors.black87,
),
),
),
],
),
);
}
答案 0 :(得分:17)
您需要将SingleChildScrollView包装在Expanded小部件中,您将获得所需内容。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var size = MediaQuery
.of(context)
.size;
final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
final double itemWidth = size.width;
return new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
child: new Image.asset(
'assets/rp1.jpg',
height: 200.0,
width: itemWidth,
),
),
new Padding(
padding: const EdgeInsets.all(12.0),
child: new Text(
"Some Heading Text",
style: new TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.w600),
),
),
new Expanded(
flex: 1,
child: new SingleChildScrollView(
child: new Text(
"1 Description that is too long in text format(Here Data is coming from API) jdlksaf j klkjjflkdsjfkddfdfsdfds " +
"2 Description that is too long in text format(Here Data is coming from API) d fsdfdsfsdfd dfdsfdsf sdfdsfsd d " +
"3 Description that is too long in text format(Here Data is coming from API) adfsfdsfdfsdfdsf dsf dfd fds fs" +
"4 Description that is too long in text format(Here Data is coming from API) dsaf dsafdfdfsd dfdsfsda fdas dsad" +
"5 Description that is too long in text format(Here Data is coming from API) dsfdsfd fdsfds fds fdsf dsfds fds " +
"6 Description that is too long in text format(Here Data is coming from API) asdfsdfdsf fsdf sdfsdfdsf sd dfdsf" +
"7 Description that is too long in text format(Here Data is coming from API) df dsfdsfdsfdsfds df dsfds fds fsd" +
"8 Description that is too long in text format(Here Data is coming from API)" +
"9 Description that is too long in text format(Here Data is coming from API)" +
"10 Description that is too long in text format(Here Data is coming from API)",
style: new TextStyle(
fontSize: 16.0, color: Colors.white,
),
),
),
),
],
),
);
}
}
答案 1 :(得分:2)
为简单起见,只需使用3rd pub:Marquee
Marquee(
text: 'There once was a boy who told this story about a boy: "',
)
答案 2 :(得分:2)
如果您想触摸屏幕的任何部分并能够滚动,请使用此示例。 我使用黄色和绿色来表示整个屏幕都会滚动,而不仅仅是文本区域。
import 'package:flutter/material.dart';
class ShowFilePage extends StatefulWidget {
@override
_ShowFilePageState createState() => _ShowFilePageState();
}
class _ShowFilePageState extends State<ShowFilePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.yellow,
appBar: AppBar(
title: Text('Text'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.green,
child: SingleChildScrollView(child: Text('insert long text here')))),
],
));
}
}
答案 3 :(得分:1)
为了垂直和水平滚动文本,我使用了以下代码。
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text('Your text.......')
),
);
答案 4 :(得分:0)
只需将根容器放在 SingleChildScrollView() 小部件中即可。
SingleChildScrollView(
child: Container() // your root container
)