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

Question

谁能告诉我，如何按百分比划分三个不同的容器?(例如: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

您可以在您的列中使用具有flex属性的ExpandedWidget。你不需要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,
),
),
],
),
);
}

关于扩展的更多信息可以在这里找到。与手动计算列或行内每个小部件的占用百分比不同，Flutter使用flex属性为您完成了计算。

Answer 2

可以使用Expandedflex小部件或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,
),
),
],
),
);
}
}