Flutter 用于 Web 和移动设备的卡片高度/宽度

Question

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

我的代码非常适合使用 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，但我无法更改卡片的宽度和高度。

有什么线索吗？

Answer 1

这是因为你的网格视图...... 在网格视图中更改

childAspectRatio

...默认值为 1 ...这意味着您的卡是 Squire ... 例如，将其更改为

childAspectRatio = 5 / 3 

。使用参数来获得正确的数字。