web-dev-qa-db-ja.com

テキストウィジェットを行ウィジェットに配置する

3つのテキストウィジェットが含まれる行があります。

真ん中のテキストエントリは複数行にまたがることがありますが、最初の2行は非常に小さくなります。

最初のウィジェットにテキストを行の上部に配置し、3番目のウィジェットにテキストを行の下部に配置したいと思います。

基本的にはこの画像に似たものです

enter image description here

したがって、基本的に最初のウィジェットは最初の引用であり、3番目は最後の引用です。

行のcrossAxisAlignmentを開始または終了に設定すると、引用符が移動しますが、両方が移動します。

現在、私はこのようなものを持っています：

return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Text('"'),
      ),
      Expanded(
        child: Text(
          entry.text,
          style: style,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        color: Colors.yellow,
        child: Text(
          '”',
          textAlign: TextAlign.start,
        ),
      ),
    ],
  );

しかし、下の引用をテキストの下に揃える方法がわかりません。現時点では、上に配置されています。

flutterflutter-layout
7
Andrew

IntrinsicHeightは、探しているウィジェットです。そのウィジェットでうまく機能しています。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new IntrinsicHeight(
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Align(
            alignment: Alignment.topLeft,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text('"'),
            ),
          ),
          Expanded(
            child: Text(
              "The middle text entry can span several lines, but the first two will be really small. I'm wanting to have the first widget have the text at the top of the row and the 3rd widget to have the text at the bottom of the row. It's basically something similar to this image"
            ),
          ),
          new Align(
            alignment: Alignment.bottomRight,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(
                '”',
                textAlign: TextAlign.start,
              ),
            ),
          ),
        ],
        ),
      ));
  }
6
Vinoth Kumar

1つのアイデアは、PositionedウィジェットでText()をラップするのではなく、スタックを作成することです。左の引用符を_top:_および_left:_に配置し、右の引用符を_bottom:_ _right:_に配置します。中間テキストをContainerでラップし、MediaQuery.of(context).size.width - qouoteWidth*2から残りのサイズを計算し、固定サイズをコンテナーに設定して、計算された座標に配置します。

他の解決策もあると確信しています

1
Tree

いつでも列-> [Expanded（text）、Expanded（Container（）、Expanded（text）]を実行して、必要に応じて空白のボックスのフレックスを調整できます。

コンテナ（または列/行）->スタック-> [Column（mainAxis start）、Column（mainAxis end）]もあります。

難なく終わらせた。 IntrinsicHeightウィジェットは計算コストが高いため、これに使用することはお勧めしません。

1
Christian