如何在 Flutter 中使屏幕可滚动？
Posted
技术标签:
【中文标题】如何在 Flutter 中使屏幕可滚动？【英文标题】：How to make a screen scrollable in Flutter? 【发布时间】：2019-12-01 03:19:26 【问题描述】：在我的 Flutter 项目中，在一页中我有一些行，包括卡片垂直对齐。现在，我希望这个屏幕可以滚动。
我已尝试将列替换为 Listview，但没有成功。我也尝试用 SingleChildScrollview 包装它，但没有奏效。如下图所示-
这是代码 -
HomeFragment.dart
class HomeFragment extends StatefulWidget
@override
_HomeFragmentState createState() => new _HomeFragmentState();
String jwt;
class _HomeFragmentState extends State<HomeFragment>
List<LastEngagement> _lastEngagements = List<LastEngagement>();
@override
void initState()
super.initState();
_getLastEngagement;
_getLastEngagement2();
void _getLastEngagement()
Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) =>
setState(() =>
_lastEngagements = newsArticles
)
);
void _getLastEngagement2()
Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) =>
setState(() =>
_lastEngagements = newsArticles
)
);
Card showCard(int index)
return new Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/men/1.jpg"
),
),
SizedBox(
width: 10.0,
),
Expanded(child: Text(_lastEngagements[index].title)),
],
),
),
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body:Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: SizedBox(
height: 100.0,
child: new ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _lastEngagements.length,
itemBuilder: (BuildContext ctxt, int index)
return Container(
width: 200.0,
child: showCard(index),
);
,
),
),
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: ()
print('Card tapped.');
,
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
)
],
)
);
用 Listview 替换 Column 会导致以下错误-
所以，我需要一个永久的解决方案来让我的屏幕可以滚动，不管我使用什么小部件。
【问题讨论】：
当您将内容包装到 List 或 SingleChildScrollview 中时，只需删除 Expanded 并尝试。 我应该删除所有展开的吗？ 是的，您需要删除所有展开的。 通过将内容包装到 List 或 SingleChildScrollview 我只是删除了 Expanded。但它没有用 【参考方案1】：SingleChildScrollView(
scrollDirection: Axis.vertical,)
试试这个。
【讨论】：
我试过但没用。它显示一个空白的白色屏幕。 SingleChildScrollView(scrollDirection: Axis.vertical, child: Column()), 必须这样使用【参考方案2】：您可以使用SingleChildScrollView 或将列小部件更改为ListView
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
],
),
));
或者
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: ListView(
children: <Widget>[],
));
【讨论】：
这正是我所做的，但它显示全白屏 链接有效期为2小时【参考方案3】：试试下面的代码：
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: Column(
children: <Widget>[
Expanded
(
child: SingleChildScrollView()
),
flex: 1,
]
)
);
【讨论】：
【参考方案4】：好吧，以前的答案确实包含解决方案..至少我是这么认为的..但它们是错误的答案，这就是为什么它不起作用..试试这个
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("News"),
),
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(),
)
],
),
);
扩展后，SingleChildScrollView() 可以在整个屏幕高度上正常工作 :) 我认为它应该工作。祝你好运
【讨论】：
以上是关于如何在 Flutter 中使屏幕可滚动？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Flutter 中使 Expanded 中的文本可滚动
如何在具有用于滑动的 ItemTouchHelper 的 RecyclerView 中使 TextView 可滚动？