listview - 用列/行小部件包裹小部件后屏幕消失

Question

当我尝试将 main_screen.dart 脚手架主体参数包装到列/行小部件时，但只显示了应用栏标题。不是脚手架的 Body 参数。我想在列/行 View 中添加一些其他小部件，这就是它对我来说必不可少的原因。请描述如何解决这个问题。我尝试用容器包装它，然后用列/行包装它，但没有任何效果。

主.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(),

    );
  }
}

主屏幕.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),
        ],
      ),
    );
  }
}

虚拟飞镖

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',

  ),


];

流行的飞镖

class Popular{
 final String id;
 final String title;
 final String imgUrl;
 const Popular(
{
  this.id,
   this.imgUrl,
  this.title
}
 );
}

Answer 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')
        ],
      )


    );
  }

检查我添加的更新代码，将其添加到主屏幕构建方法中。让我知道它是否有效，