使用 Flutter for Web 和 Mobile 的卡片高度/宽度

Posted 2023-02-22

【中文标题】使用 Flutter for Web 和 Mobile 的卡片高度/宽度

【英文标题】：Card height/width with Flutter for Web and Mobile

【发布时间】：2020-10-12 17:06:25

【问题描述】：

我正在尝试使用多张卡片来显示一些结果。

我的代码非常适合使用 Flutter 的网页，但不适用于移动

@override
  Widget build(BuildContext context) 
    final bool displayMobileLayout = MediaQuery.of(context).size.width < 600;
      return Row(

      children: [
        if (!displayMobileLayout)
          const AppDrawer(permanentlyDisplay: true,),
        Expanded(
          child: Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              automaticallyImplyLeading: displayMobileLayout,
              backgroundColor: CustomColors.primary,
              elevation: 0,
              centerTitle: true,
              title: Text(
                "My Sessions",
                textAlign: TextAlign.center,
                style: GoogleFonts.nunito(
                  fontSize: 22,
                  fontWeight: FontWeight.w700,
                  color: Theme.of(context).accentColor
                ),
              ),
            ),
            drawer: displayMobileLayout ? const AppDrawer(permanentlyDisplay: false,) : null,
            body: BlocProvider(
              create: (ctxt) => SessionBloc(repository: repository),
              child: displayListSessions(context),
            ),
          ),
        ),
      ],
    );
  

  Widget displayListSessions(BuildContext context) 
    return BlocBuilder<SessionBloc, SessionState>(
      builder: (context, state) 
        if (state is SessionEmpty) 
          BlocProvider.of<SessionBloc>(context).add(FetchSession());
        
        if (state is SessionError) 
          return Center(
            child: Text('failed to fetch session'),
          );
        
        if (state is SessionLoaded) 
          List<Card> tiles = [];
          state.sessions.forEach((element) 
            final startDate = dateTimeHelper(element.startDate);
            tiles.add(
              Card(
                elevation: 10,
                color: Colors.grey[200],
                margin: EdgeInsets.all(12.0),
                child: InkWell(
                  onTap: () 
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => SessionScreen(),
                        settings: RouteSettings(
                          arguments: element,
                        ),
                      ),
                    );
                  ,
                  child: Container(
                    height: kIsWeb ? 100 : 150,
                    child: Padding(
                      padding: EdgeInsets.all(16.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Image.network("https://fakeimg.pl/370x150", fit: BoxFit.contain,),
                          Padding(padding: EdgeInsets.all(12.0),),
                          Center(
                              child: Text(
                                "Pod in $element.pod.city",
                                style: TextStyle(
                                  color: CustomColors.primary,
                                  fontStyle: FontStyle.italic,
                                  fontWeight: FontWeight.bold
                                ),
                              ),
                          ),
                          Padding(padding: EdgeInsets.only(bottom: 20.0),),
                          Text("Session was on $startDate"),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            );
          );
          return GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: kIsWeb ? 5 : 1,
              crossAxisSpacing: 5.0,
              mainAxisSpacing: 5.0,
            ),
            children: tiles,
          );
        
        return Center(
          child: CircularProgressIndicator(),
        );
      ,
    );
  

如下所示，我只是想改变卡片的高度！

我尝试了所有方法，使用 Align、Container 甚至 SizedBox，但我无法更改卡片的宽度和高度。

有什么线索吗？

【问题讨论】：

到底是什么问题？什么不期望？移动宽度应该只有100吗？

我无法随心所欲地操纵高度。无论我做什么，高度总是一样的。

【参考方案1】：

这是因为您的 Grid View .... 在网格视图中更改 childAspectRatio ... 默认情况下这是 1 ... 这意味着您的卡是 Squire ... 例如将其更改为childAspectRatio = 5 / 3 。使用参数播放以获得正确的数字。