화면 크기 (너비 / 높이)를 기준으로 요소의 크기를 조정하는 간단한 (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
후 이와 같은 너비 또는 높이를 얻을
수 있으며 원하는 백분율로 곱할 수 있습니다