web-dev-qa-db-ja.com

画面の幅/高さの割合に合わせて要素をサイズ変更する

画面サイズ（幅/高さ）に関連して要素のサイズを設定する簡単な（LayoutBuilder以外の）方法はありますか？たとえば、CardViewの幅を画面幅の65％に設定するにはどうすればよいですか。

buildメソッドの内部では実行できないので（明らかに）、ビルド後まで延期する必要があります。このようなロジックを配置するのに好ましい場所はありますか？

flutter
62
Luke

FractionallySizedBoxも役立つ場合があります。また、MediaQuery.of(context).sizeから直接画面の幅を読み取り、それに基づいてサイズのボックスを作成することもできます

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

レイアウトが何であるかにかかわらず、本当に画面の一部としてサイズを調整したい場合。

52
Ian Hickson

これはもう少し明確かもしれません：

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

double yourWidth = width * 0.65;

これで問題が解決することを願っています。

92
Keshav Aditya R.P

これは、言及されたいくつかのソリューションの実装を示す補足的な回答です。

FractionallySizedBox

ウィジェットが1つしかない場合は、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％を占めます。

Expanded

垂直に行う場合は、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 ...
}
61
Suragch

Flexible を使用してColumn/Rowを作成するか、または必要な割合になるflex値を持つ子を展開できます。

AspectRatio ウィジェットも便利です。

9
Collin Jackson
MediaQuery.of(context).size.width
7
Nitin Mehta

mediaQueryをウィジェットの現在のコンテキストで使用して、このdouble width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.heightのような幅または高さを取得できます。その後、必要な割合で乗算できます

5
parth jansari

gridViewを使用している場合、Ian Hicksonのソリューションのようなものを使用できます。

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