如何解决使用列表视图为我的 Flutter 项目构建 UI 界面
我正在尝试为 Flutter 界面编写 UI 代码,并且一切顺利,直到我添加了“ListView”小部件。我试图编译代码,它说构建成功完成。但是当我运行它时,Virtual Android 屏幕加载了一点,然后变黑了。我尝试了几次,但无济于事。请任何人都可以帮助我使用此代码:
import 'package:Flutter/material.dart';
import 'package:Flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Stateful Clicker Counter',theme: ThemeData(
primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Clicker Counter Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 50.0),child: FloatingActionButton(
onpressed: _incrementCounter,tooltip: 'Increment',child: Icon(
Icons.play_arrow,size: 50.0,//Icon
),//Floatingactionbutton
),//Padding
Padding(
padding: const EdgeInsets.only(top: 50.0),child: Icon(
Icons.pause,child: Icon(
Icons.mic,//FloatingactionButton
),//Padding
ListView(
padding: const EdgeInsets.all(5.0),children: <Widget>[
Container(
height: 30.0,color: Colors.Amber[600],child: const Center(
child: Text(
'Entry A',//Text
),//Center
),//Container
Container(
height: 30.0,color: Colors.Amber[500],child: const Center(
child: Text(
'Entry B',color: Colors.Amber[100],child: const Center(
child: Text(
'Entry C',//Text
),//Container
],//End of Widget tree
),//ListView
],//End of submain Widget Tree
),//Row
],//End of Main Widget Tree
),//Column
),//Main Center
); //Scaffold
}
}
P.S:我刚开始使用 Flutter,所以有些事情可能看起来没有必要
解决方法
尝试在 ListView
中添加 Container
更新:
现在这段代码应该可以工作了。问题是,您在 ListView
中添加了 Row
而不是在 Column
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Stateful Clicker Counter',theme: ThemeData(
primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Clicker Counter Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key,this.title}) : super(key: key);
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title!),body: Column(
mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 50.0),child: FloatingActionButton(
onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(
Icons.play_arrow,size: 50.0,//Icon
),//Floatingactionbutton
),//Padding
Padding(
padding: const EdgeInsets.only(top: 50.0),child: Icon(
Icons.pause,child: Icon(
Icons.mic,//FloatingactionButton
),//Padding
],//End of submain Widget Tree
),//Row
Expanded(
child: ListView(
children: <Widget>[
Container(
height: 10.0,color: Colors.amber[600],child: const Center(
child: Text(
'Entry A',//Text
),//Center
),//Container
Container(
height: 10.0,color: Colors.amber[500],child: const Center(
child: Text(
'Entry B',color: Colors.amber[100],child: const Center(
child: Text(
'Entry C',//Text
),//Container
],//End of Widget tree
),//ListView,)
],//End of Main Widget Tree
),); //Scaffold
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。