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

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

FractionallySizedBox유용 할 수도 있습니다. 화면 너비를 직접 읽어보고 그에 MediaQuery.of(context).size따라 크기가 지정된 상자를 만들 수도 있습니다

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

레이아웃이 무엇이든간에 화면의 일부로 실제로 크기를 조정하려는 경우.

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

FractionallySizedBox

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

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 ...
}

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

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

double yourWidth = width * 0.65;

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

원하는 백분율까지 추가 할 수있는 flex 값을 갖는 Flexible 또는 Expanded 하위를 사용하여 열 / 행을 작성할 수 있습니다.

AspectRatio 위젯이 유용 할 수도 있습니다 .

MediaQuery.of(context).size.width

이것을하는 많은 방법이 있습니다

1. MediaQuery 사용 : 앱바 , 툴바를 포함하여 기기의 전체 화면을 반환합니다.

 Container(
        width: MediaQuery.of(context).size.width * 0.50,
        height: MediaQuery.of(context).size.height*0.50, 
        color: Colors.blueAccent[400],
 )

2. Expanded 사용 : 가로 / 세로 비율을 설정할 수 있습니다

 Container(
        height: MediaQuery.of(context).size.height * 0.50,
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 70,
              child: Container(
                color: Colors.lightBlue[400],
              ),
            ),
            Expanded(
              flex: 30,
              child: Container(
                color: Colors.deepPurple[800],
              ),
            )
          ],
        ),
    )

3. Flexible 및 AspectRatio 및 FractionallySizedBox 와 같은 기타

MediaQuery를 위젯의 현재 컨텍스트와 함께 사용하고 그 double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height 후 이와 같은 너비 또는 높이를 얻을 수 있으며 원하는 백분율로 곱할 수 있습니다

먼저 화면 크기를 얻으십시오.

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

이 후 화면 너비의 50 %를 얻기 위해 width곱하고 곱할 수 있습니다 0.5.

double width50 = size.width * 0.5;

그러나 height우리가 사용할 때 기본적 으로 문제가 발생 합니다.

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

AppBar 및 패딩을 제외한 높이를 얻는 데 사용할 수있는 제약 조건을 제공하는 LayoutBuilder 위젯을 사용하십시오. 그런 다음 SizedBox를 사용하고 LayoutBuilder의 제약 조건을 사용하여 너비와 높이를 제공하십시오.

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...