如何在顫動中適合列/行表影像內容

我有這個小專案可以將 9 個影像放入帶有顫動的列/行表中，問題是影像顯示在螢屏之外

我希望它是這樣的

這是代碼

 return MaterialApp(
          home: SafeArea(
            child: Scaffold(
                backgroundColor: Colors.tealAccent,
                body: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('images/1.png', fit: BoxFit.fill),
                        Image.asset('images/2.png', fit: BoxFit.fill),
                        Image.asset('images/3.png', fit: BoxFit.fill),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('images/4.png', fit: BoxFit.fill),
                        Image.asset('images/5.png', fit: BoxFit.fill),
                        Image.asset('images/6.png', fit: BoxFit.fill),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset('images/7.png', fit: BoxFit.fill),
                        Image.asset('images/8.png', fit: BoxFit.fill),
                        Image.asset('images/9.png', fit: BoxFit.fill),
                      ],
                    ),
                  ],
                )),
          ),
        );

這是結果

uj5u.com熱心網友回復：

嘗試使用擴展小部件-

return MaterialApp(
          home: SafeArea(
            child: Scaffold(
                backgroundColor: Colors.tealAccent,
                body: Column(
                 mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Expanded(child:Image.asset('images/1.png',fit: BoxFit.fill), flex:1),
                        Expanded(child:Image.asset('images/2.png',fit: BoxFit.fill), flex:1),
                        Expanded(child:Image.asset('images/3.png',fit: BoxFit.fill), flex:1),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Expanded(child:Image.asset('images/4.png',fit: BoxFit.fill), flex:1),
                        Expanded(child:Image.asset('images/5.png',fit: BoxFit.fill), flex:1),
                        Expanded(child:Image.asset('images/6.png',fit: BoxFit.fill), flex:1),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Expanded(child:Image.asset('images/7.png',fit: BoxFit.fill), flex:1),
                        Expanded(child:Image.asset('images/8.png',fit: BoxFit.fill), flex:1),
                        Expanded(child:Image.asset('images/9.png',fit: BoxFit.fill), flex:1),
                      ],
                    ),
                  ],
                )),
          ),
        );

讓我知道它是否有效...

uj5u.com熱心網友回復：

您可以使用網格視圖而不是列/行

return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: GridView.count(
            crossAxisSpacing: 5,
            mainAxisSpacing: 10,
            crossAxisCount: 3,
            children: <Widget>[
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
              Image.asset('lib/food.jpg'),
            ],
          ),
        ),
      ),
    );

uj5u.com熱心網友回復：

使用GridView小部件而不是Column. 下面的鏈接將幫助您創建您想要的 UI。

Flutter 中的 GridView

標籤：扑 图片 科特林 镖 排

上一篇：什么是MaterialStateProperty<OutlinedBorder>

下一篇：Spacer不會產生任何空間