我需要找到一种方法来缩放我的网格以适应 Flutter 中设备的正确屏幕尺寸

Question

我需要它看起来像这样，但我有两个主要问题。我无法让网格适合屏幕的大小，并且图标和标题位于同一行，如下图所示，并且字幕文本位于标题下方而不是图标下方。我是 Flutter 应用程序开发的新手，所以请原谅任何丑陋的代码。 Image

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';

import '../app.dart';
import '../splash-screen.dart';
import 'package:flutter/material.dart';

class AboutUs extends StatefulWidget {
  @override
  _AboutUsState createState() => _AboutUsState();
}

class _AboutUsState extends State<AboutUs> {
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Container(
            child: GridView.count(
                crossAxisCount: 1,
                padding: EdgeInsets.symmetric(vertical: 0),
                children: List.generate(
                    options.length,
                    (index) => GridOptions(
                          layout: options[index],
                        ),
                ),
            ),
        ),
    );
  }
}

class GridLayout {
  final String title;
  final IconData icon;
  final String text;
  static const String _title =
      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor';
  GridLayout({this.icon, this.title, this.text});
}

List<GridLayout> options = [
  GridLayout(
      icon: Icons.build,
      title: ' Vision',
      text:
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'),
  GridLayout(
      icon: Icons.campaign,
      title: ' Statement',
      text:
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'),
  GridLayout(
      icon: Icons.description,
      title: ' Description',
      text:
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'),
  GridLayout(
      icon: Icons.supervisor_account,
      title: ' Co-Organizers',
      text:
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'),
  GridLayout(
      icon: Icons.emoji_people,
      title: ' Founder and Executive Director',
      text:
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'),
  GridLayout(
      icon: Icons.psychology,
      title: ' Advisory Board',
      text:
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'),
];

class GridOptions extends StatelessWidget {
  final GridLayout layout;
  GridOptions({this.layout});
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return SingleChildScrollView(
        child: Wrap (
        spacing: 10,
        alignment: WrapAlignment.center,
        runAlignment: WrapAlignment.spaceAround,
        children: [
          Icon(
            layout.icon,
            size: 24,
          ),
          Text(layout.title,
              style: TextStyle(
                fontSize: 24,
              ),
          ),
          Text(layout.text,
              style: TextStyle(
                fontSize: 18,
                color: Colors.blueGrey,

              ),
          ),
        ],
      )
    );
  }
}

Answer 1

我也是新手，希望对你有帮助，

据我所知，有两种可能的解决方案。

1. 使用带有属性 widthFactor: 0.9 的 FractionallySizedBox 进行包装。

2. 将您的换行更改为 Column/row 或 Gridview 将它们设置在容器中并使用带有属性 widthFactor: 0.9 的 FractionallySizedBox 进行换行，

在这两种情况下，您都必须对长头衔做一些事情，例如“创始人和执行董事”。

//For Wrap :
class GridOptions extends StatelessWidget {
final GridLayout layout;
GridOptions({this.layout});
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return SingleChildScrollView(
    child: FractionallySizedBox(
  widthFactor: 0.9,
  child: Wrap(
    spacing: 10,
    alignment: WrapAlignment.start,
    runAlignment: WrapAlignment.spaceAround,
    children: [
      Icon(
        layout.icon,
        size: 24,
      ),
      Container(
        width: MediaQuery.of(context).size.width*0.8,
        child: Text(
          layout.title,
          style: TextStyle(
            fontSize: 24,
          ),
        ),
      ),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 41),
        child: Text(
          layout.text,
          style: TextStyle(
            fontSize: 18,
            color: Colors.blueGrey,
          ),
        ),
      ),
    ],
  ),
));
}
}


//For Column/row
class GridOptions extends StatelessWidget {
final GridLayout layout;
GridOptions({this.layout});
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
return SingleChildScrollView(
  child: FractionallySizedBox(
    widthFactor: 0.9,
    child: Column(
      children: [
        Row(
          children: [
            Icon(
              layout.icon,
              size: 24,
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: MediaQuery.of(context).size.width*0.8,
              child: Text(
                layout.title,
                style: TextStyle(
                  fontSize: 24,
                ),
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(left: 41),
          child: Text(
            layout.text,
            style: TextStyle(
              fontSize: 18,
              color: Colors.blueGrey,
            ),
          ),
        ),
      ],
    ),
  ),
);
}
}

Answer 2

我认为您不需要使用 gridView。 请尝试以下解决方案。

Widget listItem(IconData iconData, String title, String body) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children: [
          Icon(iconData),
          SizedBox(width: 20),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: Theme.of(context).textTheme.headline6,
                ),
                SizedBox(height: 20),
                Text(
                  body,
                  style: Theme.of(context).textTheme.subtitle1,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

然后使用column 和singleChildScrollView 中的listItem。

SingleChildScrollView(
      child: Column(
        children: [
          listItem(Icons.settings, 'Title', 'body',),
          listItem(Icons.settings, 'Title', 'body',),
          listItem(Icons.settings, 'Title', 'body',),
        ],
      ),
    )

Answer 3

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            listItem(
              Icons.settings,
              'Title',
              'body',
            ),
            listItem(
              Icons.settings,
              'Title',
              'body',
            ),
            listItem(
              Icons.settings,
              'Title',
              'body',
            ),
          ],
        ),
      ),
    );
  }

  Widget listItem(IconData iconData, String title, String body) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children: [
          Icon(iconData),
          SizedBox(width: 20),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: Theme.of(context).textTheme.headline6,
                ),
                SizedBox(height: 20),
                Text(
                  body,
                  style: Theme.of(context).textTheme.subtitle1,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}