Question

我是新手，现在我正在开发在线游戏应用程序。在主页中，我实现了显示游戏类别的图像滑块和网格视图。我想在网格视图周围添加垂直和水平线（如所附图像），我尝试添加Divider，但结果与我想要的不一样。

我要对这张图片做同样的事情

https://dribbble.com/shots/6913576-Papricon-Premium-Icons-from-Paperpillar/attachments

我真的不知道该如何画线。

这是我尝试实现的一些代码

import io.micronaut.http.HttpRequest;
import io.micronaut.http.HttpStatus;
import io.appter.clientmgmt.models.ClientContact;
import io.appter.clientmgmt.repositories.IClientContactRepository;
import io.micronaut.http.uri.UriTemplate;
import io.micronaut.security.annotation.Secured;
import io.micronaut.security.authentication.Authentication;
import io.micronaut.security.rules.SecurityRule;
import io.micronaut.http.annotation.*;
import io.micronaut.http.client.RxHttpClient;
import io.micronaut.http.client.annotation.Client;
import io.reactivex.Flowable;
import org.slf4j.LoggerFactory;
import org.slf4j.Logger;

import javax.validation.constraints.NotNull;
import java.security.Security;
import java.util.List;


@Controller("/clientcontact")
//@Secured(SecurityRule.IS_ANONYMOUS)
public class ClientContactController {
    private static final Logger LOG = LoggerFactory.getLogger(ClientContactController.class);
    private IClientContactRepository clientContactRepository;
    private final RxHttpClient httpClient;

    public ClientContactController(IClientContactRepository clientContactRepository,
                                   @Client("http://appterauthsvc-env.g2yapp2kcp.us-east-1.elasticbeanstalk.com") RxHttpClient httpClient) {
        this.clientContactRepository = clientContactRepository;
        this.httpClient = httpClient;
    }

    @Get("/")
    public HttpStatus index() {
        return HttpStatus.OK;
    }

    @Post("/")
    @Secured(SecurityRule.IS_AUTHENTICATED)
    public ClientContact createClientContact(@Body ClientContact clientContact,
                                             Authentication authentication,
                                             @Header("Authorization") String authorization) {
        try {
            List<ClientContact> existingClientContacts = clientContactRepository.getClientContactByClientId(clientContact.getClientId());
            LOG.info("current contacts count for the client " + clientContact.getClientId() + " is " + existingClientContacts.size());
            if (existingClientContacts.isEmpty()) {

                User userObj = new User();
                Long clientId = new Long(clientContact.getClientId());
                userObj.setClientId(clientId);
                userObj.setFirstName(clientContact.getFirstName());
                userObj.setLastName(clientContact.getLastName());
                userObj.setEmailId(clientContact.getEmailAddress());
                userObj.setPhoneNo(clientContact.getContactNumber());
                userObj.setIsActive(true);

                LOG.info("User Email set is: "+userObj.getEmailId());
                LOG.info("authorization token is: "+authorization);
                HttpRequest<?> request = HttpRequest.POST("/user", userObj).bearerAuth(authorization);

                String response = httpClient.toBlocking().retrieve(request);
                LOG.info("Request Object: "+ request.toString());
                LOG.info("Response Object: "+ response.toString());
                LOG.info("User API executed.. ");
            }


            return clientContactRepository.createClientContact(clientContact);
        } catch (Exception ex) {
            LOG.error(ex.getMessage(), ex);
            return null;
        }
    }
}

}

Answer 1

尝试将gridView放入具有所需潜水者颜色的容器中，然后像这样在十字轴和主轴上添加间距：

Scaffold(
      body: SafeArea(
        child: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Image.network(
                  "https://www.roadaffair.com/wp-content/uploads/2017/10/kabukicho-tokyo-japan-shutterstock_637989430-1024x683.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: RadialGradient(colors: [
                    Colors.grey[800],
                    Colors.black,
                  ], radius: 0.85, focal: Alignment.center),
                ),
                child: GridView(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisSpacing: 2,
                    mainAxisSpacing: 2,
                    crossAxisCount: 3,
                  ),
                  children: <Widget>[
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

结果：

Answer 2

将您的Card更改为Container并添加BoxDecoration，因为这将为您提供边框

例如：

Container(
  child: yourWidget,
  boxdecoration: BoxDecoration(
    border: Border.all(
      width: 1,
    ),
  );
)

并删除Divider

如何在Flutter网格视图周围添加垂直和水平线？

2 个答案: