Flutter 集装箱设计

Question

我从 ionic 迁移到 flutter 我有一个预制的应用程序，其中包含已经完成的编程，但我想更改它的设计，我附上了屏幕截图，看看是否有人可以帮助我我想从这个 go：[1]： Z5E056C500A1C48BADEZA7 ://i.stack.imgur.com/Iax9V.png

对此：

https://i.stack.imgur.com/jcOLP.png

我是 flutter 的新手，因为我来自 html 的设计，我正在寻找 go 的正确方向，或者如果有人可以向我解释如何实现这一点

这是我的容器代码：

 import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:ondemandservice/ui/theme.dart'; import '../../strings.dart'; Widget button157(String text, Color color, String icon, Function _callback, double width, double height){ return Stack( children: <Widget>[ Container( width: 128, height: 128, margin: EdgeInsets.only(top: 10), child: Stack( children: <Widget>[ Container( decoration: BoxDecoration( color: color, borderRadius:(null), ), padding: EdgeInsets.only(right: 10, left: 10), // child: Row( // children: [ // Expanded(child: Text(text, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w800, color: Colors.white), textAlign: TextAlign.left,), // ), // // Expanded(child: Container( // margin: EdgeInsets.only(left: 5, right: 5), // )), // ], // ) ), ]) ), Positioned.fill( child: Container( width: double.maxFinite, margin: EdgeInsets.only(left: 10, right: 10, bottom: 10), // alignment: strings.direction == TextDirection.ltr? Alignment.centerRight: Alignment.centerLeft, child: Stack( children: [ Container( child: icon.isNotEmpty? CachedNetworkImage( imageUrl: icon, imageBuilder: (context, imageProvider) => Container( width: double.maxFinite, alignment: strings.direction == TextDirection.ltr? Alignment.bottomCenter: Alignment.bottomCenter, // alignment: Alignment.bottomRight, child: Container( width: 100, height: 100, decoration: BoxDecoration( image: DecorationImage( image: imageProvider, fit: BoxFit.contain, alignment: Alignment.topCenter, )), ), ) ): Container(), // Image.asset(icon, // fit: BoxFit.contain, // ) ), Container( clipBehavior: Clip.none, margin: strings.direction == TextDirection.ltr? EdgeInsets.only(right: width*0.4, bottom: 5): EdgeInsets.only(left: width*0.4, bottom: 5 ), alignment: strings.direction == TextDirection.ltr? Alignment.bottomCenter: Alignment.bottomCenter, child: Text(text, maxLines: 1, textAlign: strings.direction == TextDirection.ltr? TextAlign.left: TextAlign.right,), ) ], ) )), Positioned.fill( child: Material( color: Colors.transparent, clipBehavior: Clip.hardEdge, shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(theme.radius) ), child: InkWell( splashColor: Colors.black.withOpacity(0.2), onTap: (){ _callback(); }, // needed )), ) ], ); }

Answer 1

我认为您应该查看GridView.builder class 的官方文档，也许您可以在其中实现您当前的 UI 设计，因为使用 GridView，您可以实现这些，让我们连续这样说，等等这个想法类似于 HTML 网格。 文档链接： GridView