用列/行小部件包装小部件后屏幕消失
Posted
技术标签:
【中文标题】用列/行小部件包装小部件后屏幕消失【英文标题】：Screen disappear after wrapping the widget with column/Row widget 【发布时间】：2020-05-04 23:31:15 【问题描述】：当我尝试将 main_screen.dart 脚手架主体参数包装到列/行小部件时，但仅显示应用栏标题。不是 Scaffold 的 Body 参数。我想在列/行视图中添加其他一些小部件，这就是为什么它对我来说很重要。请描述如何解决此问题。我尝试用容器然后列/行包装它，但没有任何效果。
main.dart
import 'package:app/main_screen.dart';
import 'package:flutter/material.dart';
main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Receipe App',
home: MainScreen(),
);
main_screen.dart
import 'package:app/detail_page.dart';
import 'package:flutter/material.dart';
import 'dummy.dart';
import 'popular_item.dart';
class MainScreen extends StatelessWidget
final dummyData = DUMMY_MEALS
.map((meData) => PopularItem(meData.title, meData.id, meData.imgUrl))
.toList();
void selectMeal(BuildContext ctx)
Navigator.of(ctx).push(
MaterialPageRoute(
builder: (_)
return DetailPage();
,
),
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('Hey Designer'),
),
body: Row(
children: <Widget>[
DetailPage(),
],
)
);
detail_page.dart
import 'package:flutter/material.dart';
// import 'package:app/detail_page.dart';
// import 'package:flutter/material.dart';
import 'dummy.dart';
import 'popular_item.dart';
class DetailPage extends StatelessWidget
final dummyData = DUMMY_MEALS
.map((meData) => PopularItem(meData.title, meData.id, meData.imgUrl))
.toList();
void selectMeal(BuildContext ctx)
Navigator.of(ctx).push(
MaterialPageRoute(
builder: (_)
return DetailPage();
,
),
);
@override
Widget build(BuildContext context)
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: dummyData.length,
itemBuilder: (ctx, index)
return Stack(
children: <Widget>[
InkWell(
onTap: ()=>selectMeal(context),
child: Container(
height: 210,
width: 200,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
gradient: LinearGradient(
colors: [Colors.white, Color(0xFFACBEA3)],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
boxShadow: [
BoxShadow(
color: Colors.black87,
blurRadius: 10.0,
spreadRadius: 0.5,
offset: Offset.fromDirection(20)),
],
),
child: Container(
margin: EdgeInsets.only(
bottom: 45, top: 20, left: 20, right: 20),
// margin: EdgeInsets.only(bottom: 40, top: 5),
// color: Colors.red,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage('images/plate1.png'),
fit: BoxFit.cover,
),
color: Colors.green,
),
),
),
),
Positioned(
top: 190,
left: 12,
height: 40,
child: Container(
child: Text(dummyData[index].title),
width: 200,
margin: EdgeInsets.only(left: 3),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
color: Colors.white,
// boxShadow: [
// BoxShadow(
// color: Colors.black87,
// blurRadius: 10.0,
// spreadRadius: 0.5,
// offset: Offset.fromDirection(60)),
// ],
),
),
)
],
);
);
popular_item.dart
import 'package:flutter/material.dart';
class PopularItem extends StatelessWidget
final String title;
final String id;
final String imgUrl;
PopularItem(this.title, this.id,this.imgUrl);
@override
Widget build(BuildContext context)
return Container(
padding: EdgeInsets.all(25),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Text(title),
Text(id),
],
),
);
dummy.dart
import 'popular.dart';
const DUMMY_MEALS = const [
Popular(
id: 'm1',
title: 'Spaghetti with Tomato Sauce',
imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
),
Popular(
id: 'm1',
title: 'Spaghetti ',
imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
),
Popular(
id: 'm1',
title: 'Spaghetti with Tomato Sauce',
imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
),
Popular(
id: 'm1',
title: 'Spaghetti with Tomato Sauce',
imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
),
];
popular.dart
class Popular
final String id;
final String title;
final String imgUrl;
const Popular(
this.id,
this.imgUrl,
this.title
);
【问题讨论】：
能否提供popularitem代码，以便在此处复制 我提供了 popular_item.dart 、 dummy.dart 和 popular.dart 【参考方案1】：您的描述仍然不清楚，但根据您的代码，我已经对发生错误的地方进行了一些更改，只需替换此代码
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return Material(
child: MaterialApp(
title: 'Receipe App',
home: MainScreen(),
),
);
你可能会得到想要的输出。
让我知道它是否有效。
//更新代码
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('Hey Designer'),
),
body:Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width*0.98,
height: 300,
child: DetailPage(),
),
],
),
Text('Hello')
],
)
);
查看我添加的更新代码，将其添加到主屏幕构建方法中。 让我知道它是否有效，
【讨论】：
这没有输出结果，只有应用程序标题栏显示当我用 Column 包装时，没有显示脚手架主体。 你在列中包装了什么？ 我正在像main_screen.dart那样在列或行中扭曲 DetailPage() 小部件
您添加的更新代码也不起作用。 @sagar acharya
查看我上传完整项目 zip 文件的链接。下载后点击颤振包获取，因为我已经删除了构建文件夹，您需要再次构建它。 dropbox.com/s/ov6rwiejtaine53/wrap_text.zip?dl=0 查看链接并让我知道它是否有效。谢谢。以上是关于用列/行小部件包装小部件后屏幕消失的主要内容，如果未能解决你的问题，请参考以下文章