如何在 Flutter 上复制（this）特定的 Android 约束布局答案

【问题标题】：How to replicate (this) specific Android constraint layout on Flutter如何在 Flutter 上复制（this）特定的 Android 约束布局
【发布时间】：2020-08-10 02:53:37
【问题描述】：

我想找到一种解决方案，在 Flutter 包装的小部件结构上模拟附加图像 Android 约束布局。

在这种情况下，蓝色文本 TextView 宽度是换行内容和图像（美元符号）必须采用相同的宽度。

有什么建议吗？非常感谢！

这是我目前的代码，一个简单的专栏，我尝试了很多替代方案，但我无法从逻辑上弄清楚：/

  Widget _getPublisherLogoImage() {
    return ClipOval(
      child: CachedNetworkImage(
        imageUrl: _publisherLogo,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
        width: 50,
        height: 50,
      ),
    );
  }

  Widget _getNewsItemHour(BuildContext context) {
    return Padding(
        padding: EdgeInsets.only(top: 8),
        child: Text(DateUtils.getHoursMinutesStringDate(_timestamp),//'09:35',
            style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).primaryColor,
                fontWeight: FontWeight.bold))
    );
  }

  Widget _getNewsItemQuotation() {
    return Padding(
        padding: EdgeInsets.only(top: 8),
        child: Text('\$$_price',
            style: TextStyle(
                fontSize: 18,
                color: Colors.black,
                fontWeight: FontWeight.bold))
    );
  }

.
. 
.
Column(
  children: <Widget>[
    _getPublisherLogoImage(),
    _getNewsItemHour(context),
    _getNewsItemQuotation()
  ],
)
.
.
.

【问题讨论】：

分享你的代码你尝试了什么？
感谢 Sandeep，代码共享。我目前的方法是为图像小部件设置固定大小，尝试了很多替代方法，但我不知道如何设置这两个小部件之间的关系

标签： flutter layout flutter-layout

【解决方案1】：

为了使文本与图像匹配，我使用了一种技术，其中IntrinsicWidth 小部件包装了Column，其crossAxisAlignment 被拉伸。

将代码中的图像宽度从width: 200 更改为您想要的任何值，下面的文本将匹配它的大小。

附：屏幕底部的第二个文本小部件可缩放到屏幕大小。

代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Replicate Android Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Replicate Android Layout')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IntrinsicWidth(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  _getPublisherLogoImage(),
                  FittedBox(
                      fit: BoxFit.fitWidth, child: _getNewsItemHour(context)),
                ],
              ),
            ),
            _getNewsItemQuotation(context),
          ],
        ),
      ),
    );
  }
}

Widget _getPublisherLogoImage() {
  return Image(
    image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    width: 200,
  );
}

Widget _getNewsItemHour(BuildContext context) {
  return Padding(
      padding: EdgeInsets.only(top: 10),
      child: Text('09.35',
          style: TextStyle(
              color: Theme.of(context).primaryColor,
              fontWeight: FontWeight.normal)));
}

Widget _getNewsItemQuotation(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  double _price = 60.59;
  return Text(
    '\$$_price',
    style: TextStyle(
      fontSize: width * 0.25,
      color: Colors.grey,
    ),
  );
}

在dartpad 运行。

【讨论】：