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

Question

嗨，我正在制作一个项目，但我需要像我包含的图片一样自定义列表视图框。 我尝试了很多选择，但我做不到。

class Butgerlist extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final title = 'Grid List';

    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

您应该使用Card而不是Container并用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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}