Programing

화면 너비 / 높이의 백분율로 요소 크기 조정

lottogame 2020. 10. 11. 09:02
반응형

화면 너비 / 높이의 백분율로 요소 크기 조정


화면 크기 (너비 / 높이)를 기준으로 요소의 크기를 조정하는 간단한 (LayoutBuilder가 아닌) 방법이 있습니까? 예 : CardView의 너비를 화면 너비의 65 %로 설정하려면 어떻게해야합니까?

build메서드 내에서 수행 할 수 없으므로 (분명히) 빌드 후까지 연기해야합니다. 이와 같은 논리를 넣을 선호하는 장소가 있습니까?


FractionallySizedBox유용 할 수도 있습니다. 화면 너비를 직접 읽고이를 MediaQuery.of(context).size기반으로 크기가 지정된 상자를 만들 수도 있습니다.

MediaQuery.of(context).size.width * 0.65

레이아웃이 무엇이든 상관없이 화면의 일부로 크기를 조정하려는 경우.


이것은 좀 더 명확 할 수 있습니다.

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

이것이 문제가 해결되기를 바랍니다.


이것은 언급 된 몇 가지 솔루션의 구현을 보여주는 보충 답변입니다.

FractionallySizedBox

단일 위젯이있는 경우 FractionallySizedBox위젯을 사용하여 채울 사용 가능한 공간의 백분율을 지정할 수 있습니다. 여기서 녹색 Container은 사용 가능한 너비의 70 %와 사용 가능한 높이의 30 %를 채우도록 설정됩니다.

FractionallySizedBox

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

퍼지는

Expanded위젯은 위젯이 열의 경우는 행, 또는 가로 세로 경우, 사용 가능한 공간을 채우도록 허용한다. flex여러 위젯과 함께 속성을 사용하여 가중치를 부여 할 수 있습니다. 여기서 녹색 Container은 너비의 70 %를 차지하고 노란색 Container은 너비의 30 %를 차지합니다.

퍼지는

당신이 수직으로하고 싶은 경우, 바로 교체 Row와 함께 Column.

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

보충 코드

다음은 main.dart참조 용 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}

You could build a Column/Row with Flexible or Expanded children that have flex values that add up to the percentages you want.

You may also find the AspectRatio widget useful.


MediaQuery.of(context).size.width

you can use MediaQuery with the current context of your widget and get width or height like this double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height after that, you can multiply it with the percentage you want


First get the size of screen.

Size size = MediaQuery.of(context).size;

After this you can get width and multiply it with 0.5 to get 50% of screen width.

double width50 = size.width * 0.5;

But problem generally comes in height, by default when we use

double screenHeight = size.height;

우리가 얻는 높이는 StatusBar+ notch+ AppBar높이 를 포함하는 전역 높이입니다 . 따라서 장치의 왼쪽 높이를 얻으려면 전체 높이에서 padding높이 ( StatusBar+ notch)와 AppBar높이 를 빼야 합니다. 방법은 다음과 같습니다.

double abovePadding = MediaQuery.of(context).padding.top;
double appBarHeight = appBar.preferredSize.height;
double leftHeight = screenHeight - abovePadding - appBarHeight;

이제 다음을 사용하여 화면 높이의 50 %를 얻을 수 있습니다.

double height50 = leftHeight * 0.5

GridView를 사용하는 경우 Ian Hickson의 솔루션과 같은 것을 사용할 수 있습니다.

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4

참고 URL : https://stackoverflow.com/questions/43122113/sizing-elements-to-percentage-of-screen-width-height

반응형