Question

我有以下TabBar（我已经使用flexibleSpace删除了填充，将空白的AppBar放在TabBar和SafeArea上方，以使TabBar不会出现在android状态栏下方）：

func convertImageFromAsset(asset: PHAsset) -> UIImage {
    let manager = PHImageManager.default()
    let option = PHImageRequestOptions()
    var image = UIImage()
    option.isSynchronous = true
    manager.requestImage(for: asset, targetSize: PHImageManagerMaximumSize, contentMode: .aspectFit, options: option, resultHandler: {(result, info)->Void in
        image = result!
    })
    return image
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    pickedImage = convertImageFromAsset(asset: images[indexPath.item])
    self.performSegue(withIdentifier: "showDetailSegue", sender: nil)
}

呈现时如下所示：

如何在保持安全区域和flexibleSpace的同时避免底部溢出？

Answer 1

删除SafeArea和Column应该可以解决问题：

      appBar: AppBar(
        flexibleSpace: TabBar(
          indicatorColor: Color(0xfffffffe),
          tabs: [
            Tab(text: "Diary",
                icon: Icon(Icons.book),),
            Tab(text: "Charts",
                icon: Icon(Icons.insert_chart),),
            Tab(text: "Settings",
                icon: Icon(Icons.settings),)
          ],
        ),
      ),

Answer 2

如果将TabBar包装在Expanded小部件中，它应该可以解决您的问题

AppBar(
            flexibleSpace: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Expanded(
                    child: TabBar(
                      indicatorColor: Color(0xfffffffe),
                      tabs: [
                        Tab(
                          text: "Diary",
                          icon: Icon(Icons.book),
                        ),
                        Tab(
                          text: "Charts",
                          icon: Icon(Icons.insert_chart),
                        ),
                        Tab(
                          text: "Settings",
                          icon: Icon(Icons.settings),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

让我知道它如何为您工作。

Flutter：启用标签后，TabBar会溢出AppBar的底部

2 个答案: