Flutter網格樣式欄怎么辦？ 不是 1 行

Question

我有 flutter controller 名稱類別，並顯示我的類別項目，它們都是 1（行）行，滾動如下所示；

 BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX ..... ...

我想在下面像完整的設備 3-4 最大列和另一個在行內添加；

  BOX BOX BOX BOX
  BOX BOX BOX BOX
  BOX BOX BOX BOX
  BOX BOX BOX BOX
  BOX BOX BOX BOX
  BOX BOX BOX BOX
  ... ...  
   

我在下面的代碼如何解決這個問題？

class Categories extends StatelessWidget {
  double marginLeft;
  Category category;
  Categories({Key key, this.marginLeft, this.category}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      splashColor: Theme.of(context).accentColor.withOpacity(0.08),
      highlightColor: Colors.transparent,
      onTap: () {
        Navigator.of(context).pushNamed('/Categories', arguments: RouteArgument(id: category.id));
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Hero(
            tag: category.id,
            child: Container(
              margin: EdgeInsetsDirectional.only(start: this.marginLeft, end: 20),
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                  boxShadow: [BoxShadow(color: Theme.of(context).focusColor.withOpacity(0.2), offset: Offset(0, 2), blurRadius: 7.0)]),
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: category.image.url.toLowerCase().endsWith('.svg')
                    ? SvgPicture.network(
                        category.image.url,
                        color: Theme.of(context).accentColor,
                      )
                    : CachedNetworkImage(
                        fit: BoxFit.cover,
                        imageUrl: category.image.icon,
                        placeholder: (context, url) => Image.asset(
                          'assets/img/loading.gif',
                          fit: BoxFit.cover,
                        ),
                        errorWidget: (context, url, error) => Icon(Icons.error),
                      ),
              ),
            ),
          ),
          SizedBox(height: 5),
          Container(
            margin: EdgeInsetsDirectional.only(start: this.marginLeft, end: 20),
            child: Text(
              category.name,
              overflow: TextOverflow.ellipsis,
              style: Theme.of(context).textTheme.bodyText2,
            ),
          ),
        ],
      ),
    );
  }
}

類別 model；

class Category {
  String id;
  String name;
  Media image;

  Category();

  Category.fromJSON(Map<String, dynamic> jsonMap) {
    try {
      id = jsonMap['id'].toString();
      name = jsonMap['name'];
      image = jsonMap['media'] != null && (jsonMap['media'] as List).length > 0 ? Media.fromJSON(jsonMap['media'][0]) : new Media();
    } catch (e) {
      id = '';
      name = '';
      image = new Media();
      print(CustomTrace(StackTrace.current, message: e));
    }
  }
}

Answer 1

使用小部件GridView ：

//An example list to represent your categories 
final List<Category> categories = [
  Category(id: '1', name: 'categoryName', image: yourFirstImage),
  Category(id: '2', name: 'anotherName', image: yourSecondImage),
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GridView.count(
      crossAxisCount: 4, //number of childs in each row
      mainAxisSpacing: 2, //horizontal space between childs
      crossAxisSpacing: 2, //vertical space between childs
      children: List.generate(
        categories.length, //the number of categories inside the list
        (index) {
          return Categories(  //your widget here
            category: categories[index],
          );
        },
      ),
    ),
  );
}