英文:
Problem adding widget to GridView with button and scroll
问题
以下是代码的中文翻译部分：
一开始，我有一个Wrap，通过点击“添加”按钮可以向Wrap添加一个新的卡片。后来，我将Wrap更改为GridView，以便可以进行滚动。然而，现在当我按下按钮时，在设备上什么都不显示，但如果我将GridView改回Wrap并进行热重载，卡片就会显示出来？我不确定问题出在哪里。
此外，我无法滚动，我知道我做错了些什么，但我不知道是什么。
class MainScreen extends StatefulWidget {
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
List<Widget> cards = [];
dynamic addReusableCard (String activity, int goal, double elapsed){
return cards.add(ReusableCard(activityText: activity, activityLength: goal, activityTimeElapsed: elapsed,));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text('时间卡片',
style: TextStyle(
fontSize: 20.0,
letterSpacing: 5.0,
),),
Text('您已经醒来了总共16小时',
style: TextStyle(
fontSize: 16.0,
fontStyle: FontStyle.italic,
),),
Expanded(
flex: 9,
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: (175.0 / 220.0),
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
children: cards
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: (){
setState(() {
addReusableCard('阅读', 2, 0.3);
});
},
backgroundColor: kAccentColor,
elevation: 0.0,
child: Icon(Icons.add),
),
),
),
],
),
),
),
);
}
}
希望这对你有帮助。
英文:
At first I had a Wrap that by clicking on the "add" button would add a new card to the Wrap. Then I changed the Wrap to GridView so that I could add scrolling. However, now when I press the button nothing shows on the device, but if I change GridView back to a Wrap and hot reload, the cards show up? I'm not sure what's wrong.
Also I can't scroll, I know I'm doing something wrong, but I have no idea what.
class MainScreen extends StatefulWidget {
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
List<Widget> cards = [];
dynamic addReusableCard (String activity, int goal, double elapsed){
return cards.add(ReusableCard(activityText: activity, activityLength: goal, activityTimeElapsed: elapsed,));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text('TIME CARDS',
style: TextStyle(
fontSize: 20.0,
letterSpacing: 5.0,
),),
Text('You\'re awake for a total of 16h',
style: TextStyle(
fontSize: 16.0,
fontStyle: FontStyle.italic,
),),
Expanded(
flex: 9,
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: (175.0 / 220.0),
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
children: cards
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: (){
setState(() {
addReusableCard('reading', 2, 0.3);
});
},
backgroundColor: kAccentColor,
elevation: 0.0,
child: Icon(Icons.add),
),
),
),
],
),
),
),
);
}
}
Thanks in advance
答案1
得分: 2
要实现动态列表长度，你应该使用 gridView.builder()。
以下是相关的代码：
Expanded(
flex: 9,
child: GridView.builder(
itemCount: cards.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2
),
itemBuilder: (BuildContext context, int index) {
return cards[index];
}
)
),
英文:
For a dynamic list length you should use gridView.builder()
Here is the relevant code:
Expanded(
flex: 9,
child: GridView.builder(
itemCount: cards.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2
),
itemBuilder: (BuildContext context, int index) {
return cards[index];
}
)
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论