我应该对哪种布局结构进行编码以匹配我的应用程序设计

Question

对于我的新Flutter项目，我已经对布局进行了一些研究，但是仍然有些含糊。这是我要创建的布局：

经过研究并观看了一些视频，看来这是MaterialApp代码：

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Color(0xFF0E2E40),
          title: Text('City Discovery'),
          actions: [
            Image.asset(
              'assets/images/logoicon.png',
              width: 35,
            )
          ],
        ),
        body: ListView(
          children: [
            introSection,
            Image.asset(
              'assets/images/barman.png',
              width: 600,
              height: 240,
              fit: BoxFit.cover,
            ),
            crimeSection,
            mysterySection,
            bottomSection,
          ],
        ),
      ),
    );
  }

但是现在定义不同部分的布局非常困难。据我所知，应该有：

1. ListView使我的页面可滚动，应该是
2. 简介：XYZ的容器，其中2行包含2个文本节。
3. 图像
4. crimeSection：XYZ的容器，其中3行包含2个文本部分和按钮。第一个文本部分分为2个用于图标和文本的列]
5. mysterySection：XYZ的容器，其中2行包含2个文本部分。第一个文本部分分为两列，分别用于图标和文本
6. bottomSection：制表符？尽管标签似乎只是应用程序栏的一部分，所以不知道替代方法是什么

我能找到的最接近的示例，但是更改代码并不能帮助我：https://github.com/flutter/website/blob/master/examples/layout/lakes/step6/lib/main.dart

出于某种原因，容器只能有1个孩子，所以这可能意味着我需要在我的容器中排上一行，然后再有孩子，然后两个文本节都有2个孩子？难以编写一些简单的UI的代码。

[如果有人可以为我提供introSection和bottomSection的代码，我可能可以自己解决其余的问题。

Answer 1

我建议为可重复使用的小部件创建组件文件夹，如按钮，徽标，文本等。如果您有未在其他组件中使用的窗口小部件，则可以将其分隔在同一文件中，但可以使用下划线将其设为私有（仅在该文件内部可见）。所有这些将使您的代码更具可读性。

关于底部标签。

如果要将其用作底部选项卡，则可以将其放在Scaffold小部件的bottomNavigationBar参数中。如果需要在ListView内部使用，则可能需要，但您需要传递制表符的确切高度，因为TabView试图尽可能地扩展，与ListView相同。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LayoutExample(),
    );
  }
}

class LayoutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _BottomNavigationBar(),
      body: ListView(
        children: <Widget>[
          _IntroSection(),
          Placeholder(fallbackHeight: 200),
          _CrimeSection(),
          _MysterySection()
        ],
      ),
    );
  }
}

class _IntroSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Text('Intro text1'),
          Text('Intro text2')
        ],
      ),
    );
  }
}

class _CrimeSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blueAccent,
        ),
      ),
      height: 200,
      child: Text('CrimeSection'),
    );
  }
}

class _MysterySection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blueAccent,
        ),
      ),
      height: 200,
      child: Text('MysterySection'),
    );
  }
}

class _BottomNavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}