如果我的appBar屬性，底部溢位138像素

誰能告訴我，如何按百分比拆分三個不同的容器？（例如：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，就會出現這個問題。

uj5u.com熱心網友回復：

您可以在列中使用Expanded帶有flex屬性的小部件。您不需要 SizeConfig 類。將您的 HomePage 構建方法替換為以下代碼：

@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,
        ),
      ),
    ],
  ),
);
}

有關 Expanded 的更多資訊，您可以在此處找到。Flutter 無需手動計算 Column 或 Row 中每個小部件的百分比占用率，而是使用 flex 屬性為您完成。

uj5u.com熱心網友回復：

您可以將Expanded小部件與flex或SingleChildScrollView或兩者一起使用。

如果您希望小部件自動適應螢屏，您可以使用 Flex。如果您想讓您的小部件可滾動，您可以使用SingleChildScrollview滾動您的小部件。

彈性示例如下。

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,
            ),
          ),
        ],
      ),
    );
  }
}

標籤：扑 颤振布局

上一篇：如何分隔串列中包含的專案？

下一篇：RichTextFlutter中如何獲取String的值？