如何減少頁面中的串列空間？

我正試圖在一個應用程式的初始頁面中插入一個行格式的串列，但它的用戶界面顯示了太多的間隔。實際上，我從一個YouTube教程中獲得了這個UI，并試圖實作其元素。我怎樣才能相應地調整我的代碼以減少間距，如下圖所示？

代碼：

class Firstpage extends StatefulWidget{
  @override
  _FirstpageState createState() => _FirstpageState();
}

class _FirstpageState extends State< Firstpage> {
  int currentPage = 0;

  List<Map<String, String> > splashData = [
    {
      "text": "歡迎來到東光，我們來購物吧！"。
    },
    {
      "text":
      "我們幫助人們與美國各地的商店聯系。
圍繞美利堅合眾國"。
    },
    {
      "text": "我們展示簡單的購物方式。
只要和我們呆在家里"。
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        體。SafeArea(
            孩子。列(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox（高度：80）。
                容器(
                  width: 340,
                  高度。250,
                  孩子。
                  new Image.asset('assets/images/trip.png', fit: BoxFit.fill)。
                ),
                中心(
                  孩子。Text("App", style: TextStyle(
                    字體大小。40,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF9a0e2a)
                  ),),
                ),
                SizedBox（高度：10）。
                擴展的(
                  孩子。PageView.builder(
                    onPageChanged: (value) {
                      setState(() {
                        currentPage = value。
                      });
                    },
                    itemCount: splashData.length,
                    itemBuilder: (context, index) => intro(
                      text: splashData[index]['text'] 。
                    ),
                  ),
                ),
                展開(
                  孩子。列(
                      children: <Widget>[
                        行(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: List.generate(
                            splashData.length,
                                (index）=> buildDot（index: index）。
                          ),
                        ),
                      ]
                  )
                ),
                DefaultButton(
                  文本。"Sign Up"。
                  按鍵。() {
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup())。
                  },
                ),
                SizedBox（高度：20）。
                DefaultButton(
                  文本。"Login"。
                  按鍵。() {
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup())。
                  },
                ),
              ],
            )
        )
    );
  }

  AnimatedContainer buildDot({int?/span> index}) {
    return AnimatedContainer(
      持續時間。Duration( milliseconds: 200)。
      邊緣。EdgeInsets.only(right: 5)。
      高度。6。
      寬度: currentPage == index ? 20 : 6,
      裝飾。BoxDecoration(
        color: currentPage == index ? Color(0xFFeb1f48) : Color(0xFFD8D8) 。
        borderRadius: borderRadius.circular(3)。
      ),
    );
  }

而只是作為參考，類的介紹是：

class intro extends StatelessWidget { const intro({ key? key。 this.text, this.image, }) : super(key: 關鍵)。 final String? text, image; @override Widget build(BuildContext context) { return Column( children: <Widget>[ 文本( text!, textAlign: TextAlign.center, ), ], ); } }

uj5u.com熱心網友回復：

如果你沒有使用SingleChildScrollView和直接使用Column，請嘗試Spacer()來平衡間距或使用flex來調整間距。

Spacer()

或者

Spacer(flex: 1) 。

示例

Column(
      children:[
              Spacer()。
         容器()
                  width: 340,
                  高度。250。
                  孩子。
                  new Image.asset('assets/images/trip.png', fit: BoxFit.fill)。
                ),
                中心(
                  孩子。Text("App", style: TextStyle(
                    字體大小。40,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF9a0e2a)
                  ),),
                ),
         Spacer(),
]),

uj5u.com熱心網友回復：

你可以通過調整你的SizedBox()來減少你的間距。 如果你注意到你的代碼上有SizedBox()而沒有一個子程式，那是因為你的螢屏上有很多空間。

而且僅供參考，你可以使用Spacer()或Expanded()來使空位更加靈活或動態地接近用戶的螢屏。 但請記住，你不能使用Spacer()或Expanded()如果：

1. 你有一個卷軸的父類。
2. 你有可滾動的父類，其主軸方向與相應的Column或Row相同（例如，你有SingleChildScrollView(child: Column(...))那么您就不能在Column上使用Expanded。因為該部件將有無限大的主軸尺寸，這將導致無限大除以flex量） TLDR: 你不能在無限大的主軸尺寸上使用Expanded & Spacer
3. 當使用Column / Row時要注意 "最大主軸尺寸"（實際上，Row和Column不會將最大主軸尺寸傳遞給它們的子代。這就是為什么當你試圖在沒有使用SizedBox或Expanded或Container等的情況下在Row內寫很長很長的Text時，你會出現OverFlow例外。 )

標籤：

上一篇：iframe父方是否可以訪問子方基于cookie的認證令牌？

下一篇：我可以使用一個Python程式并使用tkinter將其轉換為一個gui嗎？