如何在抖动上制作列表式滚动视图

时间:2019-12-21 05:43:29

标签: flutter

我需要为我的应用程序提供一个滚动视图,如果有任何建议,找不到很好的修复源,请让我知道,谢谢 我也想从其他页面调用装饰方法,如果我想分享的话

我要从其他页面调用装饰方法,如果我想共享它

import 'package:flutter/cupertino.dart';
      import 'package:flutter/material.dart';
        import 'package:resat/BurgerListView/decoration.dart';
      import 'item.dart';
       import 'detailspage.dart';
class BurgerList extends StatelessWidget {
  static const title = 'Title';

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
final padding = EdgeInsets.all(8.0);
final border = BeveledRectangleBorder(
  borderRadius: BorderRadius.circular(25.0),
);
return MaterialApp(
  title: 'title',
  home: Scaffold(
    appBar: AppBar(
      title: Text("Menu"),
    ),
    body: GridView.count(
        crossAxisCount: 2,
        children: _foodItems.map((FoodItem item) {
          return Padding(
            padding: padding,
            child: Card(
              shape: border,
              child: InkWell(
                child: new Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                        item.imageAssetPath,
                      ),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                ),
                onTap: () {
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                                builder: (BuildContext context) =>                
                                    FoodItemWidget(item: item)));
                },   
              ),
            ),
           );
              }).toList(growable: false)),
        ),
      );
        }
    }

    List<FoodItem> _foodItems = <FoodItem>[
          FoodItem("Item 1", "android/assets/wraps/wrap1.jpeg"),
    FoodItem("Item 2", "android/assets/wraps/wrap2.jpeg"),
  FoodItem("Item 3", "android/assets/wraps/wrap3.jpeg"),
  FoodItem("Item 5", "android/assets/wraps/wrap1.jpeg"),
 FoodItem("Item 6", "android/assets/wraps/wrap1.jpeg"),
   FoodItem("Item 7", "android/assets/images/lunch.jpeg"),
    FoodItem("Item 8", "android/assets/images/lunch.jpeg"),
    FoodItem("Item 9", "android/assets/images/lunch.jpeg"),
  FoodItem("Item 10", "android/assets/images/lunch.jpeg"),
 ];

   class FoodItemWidget extends StatelessWidget {
  final FoodItem item;

const FoodItemWidget({Key key, this.item}) : super(key: key);

          @override
       Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
       body: Column(
         children: <Widget>[
      Image.asset(item.imageAssetPath),
      Text(item.name, style: TextStyle(fontSize: 24.0, fontWeight: 
FontWeight.bold),),

           decor(),
           decor(),
           decor(),
           decor(),
           decor(),
         ],

       ),


    ),
  );
}
}

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以使用ListView Widget,而不是使用Column Widget,该控件的工作原理类似,但是可以使用滚动行为

ListView(
    padding: const EdgeInsets.all(8),
        children: <Widget>[
            decor(),
            decor(),
            decor(),
            decor(),
            decor(),
    ],
)