底部溢出 138 像素，如果我 appBar 属性

Question

谁能告诉我，如何按百分比拆分三个不同的 Container？（例如：0.1,0.8,0.2）

这是我的代码：

import 'package:flutter/material.dart';
import '../../../constants.dart';
import '../../../size_config.dart';

class HomeScreen extends StatelessWidget {
  static String routeName = "/HomeScreen";
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // You have to call it on your starting screen
    SizeConfig().init(context);
    AppBar appBar = AppBar(
      shadowColor: Colors.white70,
      elevation: 10,
      title: const Text(
        'WELCOME TO Flutter',
        style: TextStyle(
          color: kPrimaryColor,
          fontWeight: FontWeight.bold,
        ),
      ),
      backgroundColor: Colors.white,
      leading: Container(),
    );
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: appBar,
      body: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return SafeArea(child:

    Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          width: SizeConfig.screenWidth,
          height: SizeConfig.screenHeight * 0.1,
          color: Colors.orange,
        ),
        Container(
          width: SizeConfig.screenWidth,
          height: SizeConfig.screenHeight * 0.8 ,
          color: Colors.greenAccent,
        ),
        const Spacer(),
        Container(
          width: SizeConfig.screenWidth,
          height: SizeConfig.screenHeight * 0.1 ,
          color: Colors.indigo,
        ),
      ],
    ),
    );
  }
}

class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late double screenHeight;
  static double? defaultSize;
  static Orientation? orientation;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
  }
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

// Get the proportionate height as per screen size
double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  // 375 is the layout width that designer use
  return (inputWidth / 375.0) * screenWidth;
}

我的主屏幕内容不应滚动，页面应根据设备高度调整。我们也需要appBar，如果我们添加appBar就会出现这个问题。

Answer 1

您可以在专栏中将 Expanded 小部件与 flex 属性一起使用。您不需要 SizeConfig Class。将您的主页构建方法替换为以下代码：

@override
Widget build(BuildContext context) {
return SafeArea(
  child: Column(
    children: [
      Expanded(
        flex: 1,
        child: Container(
          width: double.infinity,
          color: Colors.orange,
        ),
      ),
      Expanded(
        flex: 8,
        child: Container(
          width: double.infinity,
          color: Colors.greenAccent,
        ),
      ),
      Expanded(
        flex: 1,
        child: Container(
          width: double.infinity,
          color: Colors.indigo,
        ),
      ),
    ],
  ),
);
}

您可以找到有关扩展的更多信息 here。 Flutter 无需手动计算 Column 或 Row 中每个小部件的占用百分比，而是使用 flex 属性.

Answer 2

您可以将 Expanded 小部件与 flex 或 SingleChildScrollView 或两者一起使用。

如果您希望小部件自动适合屏幕，您可以使用 Flex。如果你想让你的小部件可滚动，你可以使用 SingleChildScrollview.

滚动你的小部件

下面是 flex 的例子。

class FlexDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              color: Colors.red,
            ),
          ),
          Expanded(
            flex: 8,
            child: Container(
              width: double.infinity,
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

以 SingleChildScrollView 为例。

 class ScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Expanded(
            flex: 10,
            child: Container(
              width: double.infinity,
              color: Colors.red,
            ),
          ),
          Expanded(
            flex: 80, // you can aslo use flex from 100
            child: Container(
              width: double.infinity,
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 10,
            child: Container(
              width: double.infinity,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

底部溢出 138 像素，如果我 appBar 属性

Bottom Overflowed by 138 pixels if i appBar property

flutter

flutter-layout