如何使具有边框半径的Flutter ListView像图片一样

Question

您好，我正在制作一个项目，但我需要自定义列表视图框，如图片所示，其中包括我尝试了许多选项，但我无法做到这一点

Butgerlist类扩展了StatelessWidget {   @override   小部件build（BuildContext context）{     最终标题=“网格列表”；

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: GridView.count(
      crossAxisCount: 2,
      children: <Widget>[
        Container(

          child: const Center(
            child: (Text("box1")),
          ),
          color: Colors.red,
        ),
        Container(
          child: Text("box2"),
          color: Colors.yellow,
        ),
        Container(
          child: Text("box3"),
          color: Colors.orange,
        ),
        Container(
          child: Text("box4"),
          color: Colors.blue,
        ),
      ],
    ),
  ),
);

} }

如果您有任何建议，我想像这样使我的列表视图，请让我知道谢谢

Answer 1

您应该使用Container而不是Card并用Padding小部件包装它。

这应该为您工作：

class MyApp extends StatelessWidget {
  static const title = 'Title';
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final border = RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    );
    final padding = const EdgeInsets.all(4.0);
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                color: Colors.red,
                child: const Center(child: (Text("box1"))),
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box2"),
                color: Colors.yellow,
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box3"),
                color: Colors.orange,
              ),
            ),
            Padding(
              padding: padding,
              child: Card(
                shape: border,
                child: Text("box4"),
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}