web-dev-qa-db-ja.com

Flutterでコンテナーの最大幅を制限する

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

これは私のウィジェットのビルドメソッドであり、msgパラメータとして渡すものに応じて、このUIをレンダリングします

  1. テキストの読み込み enter image description here
  2. 非常に長いテキスト enter image description here

今私が直面している問題は、幅を設定せずにこのコンテナー/青いボックス内にテキストを折り返すことができないということですが、コンテナー/青いボックスの幅を設定すると、テキストがどれほど短くても常に広いままになります。

コンテナ/ブルーボックスのmaxWidth（たとえば、500としましょう）を設定する方法はありますか？青いボックスが「読み込み中」のような小さなテキストに必要な幅になり、長いテキストの場合は500ユニットの幅に達するまで拡大し、テキストを折り返しますか？

長いテキストに必要な出力：

ロードのような小さなテキストの場合、UIに変更を加えたくありませんが、長いテキストの場合は、このように見せたいです。 enter image description here

user-interfaceflutterflutter-layoutword-wrapflutter-container
14
Nishant Desai

次のように、優先されるmaxWidthを使用してコンテナウィジェットに制約を追加できます。

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

これが役に立てば幸いです！

36
Kappadona

テキストの周りにフレキシブルを使用してから、フレキシブルを固定サイズのコンテイナーでラップしますか？ただのアイデア。

0
user11209319