如何使 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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}