如何在 Flutter 中创建页眉/页脚/主布局答案

【问题标题】：How to create Header/Footer/Main layout in Flutter如何在 Flutter 中创建页眉/页脚/主布局
【发布时间】：2020-05-08 22:10:21
【问题描述】：

我正在努力在 Flutter 中创建附加布局。虽然我创建了一些可以工作的东西，但它确实很复杂而且很难看（代码方面）。我想要关于如何创建它的建议？

注意：我只希望使用标准布局（行/列/中心/等）创建它。我不希望使用像 BottomNavigationBar 这样的小部件。

【问题讨论】：

甚至没有 AppBar？如果是这种情况，您可以只是一个普通列，中间项目用 Expanded 包裹。
甚至不是 AppBar。我正在学习行和列可以为我做什么:-)
也许这个答案可以帮助你：stackoverflow.com/a/65933844/4493817

标签： flutter dart flutter-layout

【解决方案1】：

你可以这样做，（请阅读代码中的推荐）

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //You should use `Scaffold` if you have `TextField` in body.
      //Otherwise on focus your `TextField` won`t scroll when keyboard popup.
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            //Header Container
            Container(
              padding: const EdgeInsets.all(8.0),
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text("Header"),
            ),

            //Body Container
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 30.0),
                child: Column(
                  children: <Widget>[
                    Container(
                      color: Colors.red,
                      height: 200.0,
                      alignment: Alignment.center,
                      child: Text("Content 1"),
                    ),
                    Container(
                      color: Colors.green,
                      height: 300.0,
                      alignment: Alignment.center,
                      child: Text("Content 1"),
                    ),
                    //TextField nearly at bottom
                    TextField(
                      decoration: InputDecoration(hintText: "Enter Text Here"),
                    ),
                  ],
                ),
              ),
            ),

            //Footer Container
            //Here you will get unexpected behaviour when keyboard pops-up. 
            //So its better to use `bottomNavigationBar` to avoid this.
            Container(
              padding: const EdgeInsets.all(8.0),
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text("Footer"),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

@页脚在键盘上方。所以为了避免我添加了 resizeToAvoidBottomInset: false，这行代码。但那个时候它不是滚动的。保持景观也并注意。为了得到那个 TextFormField 我们要做什么？我不希望键盘上方的按钮。
@SunishaSindhu 正如我在上述代码的 cmets 中提到的，您应该使用 Scaffold 小部件的 bottomNavigationBar。

【解决方案2】：

Try Column 有三个孩子，Header 和 Footer 有一个特定的大小，Content 占据剩余的空间。

Column(
            children: [
              Container(height: 100, child: HeaderWidget),
              Expanded(child: ContentWidget),
              Container(height: 100, child: FooterWidget),
            ]

滚动将应用于内容。

【讨论】：