0

在此处输入图像描述

我一直在尝试使用row和在 Flutter 中定义定制卡片，column并且似乎无法获得类似于上图的固定格式布局（红线表示卡片的区域，只是用于显示区域）。

例如

return Card(child: Column(
  children: [
    Row(
      children: [
        Column( children: [
          Text('Riverside cafe...'),
          Ratingbar(),
        ],),
        ImageWidget(),
      ],
    ),
    Container(child: Text('Pubs & restaurants'), color : Colors.purple)
  ],

生成的卡片将显示在 alistview和 usingrows及columns以上结果中，根据数据不同大小的区域。

在我看来，使用row并且column可能不是实现这一目标的最佳方式。有没有更好的办法？

4

1 回答 1

1

至于最好的，我想这是由你和你的客户来决定的。

自从我使用 Flutter 以来，我还没有遇到过像 CSS 网格这样非常适合这种情况的东西。最接近的比较是 StaggeredGrid ( https://pub.dev/packages/flutter_staggered_grid_view )，但它提供的控制不如 CSS 网格，而且似乎不太适合您的用例。

行、列（和其他布局小部件）可以完成工作： 在此处输入图像描述

这是生成上述示例的 main.dart。代码质量并不完美，但希望你能很好地遵循它，它可以帮助你完成你需要完成的事情。

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  static const String _title = 'Bespoke card example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bespoke card example')),
      body: Center(
        child: Wrap(runSpacing: 10.0, children: [
          BespokeCard(title: 'Short name', width: 350),
          BespokeCard(
              title: 'Riverside Cafe with a really long name', width: 350)
        ]),
      ),
    );
  }
}

class BespokeCard extends StatelessWidget {
  final String title;
  final double width;
  BespokeCard({this.title, this.width});
  @override
  Widget build(BuildContext context) {
    Widget _restaurantNameContainer = Container(
      constraints: BoxConstraints(
        minHeight: 0,
        maxHeight: 120,
        maxWidth: (500.0 - 40 - 175 + 1),
        minWidth: (500.0 - 40 - 175 + 1),
      ),
      child: AutoSizeText(
        title,
        style: TextStyle(fontSize: 60),
        maxLines: 2,
        minFontSize: 10,
        stepGranularity: 0.1,
        overflow: TextOverflow.ellipsis,
      ),
    );
    Widget _rightSideSection = Container(
      width: 175,
      height: Size.infinite.height,
      child: Center(
        child: Icon(
          Icons.umbrella,
          size: 70,
        ),
      ),
    );
    Widget _topSection = Flexible(
      flex: 1,
      child: Row(
        children: [
          Flexible(
            fit: FlexFit.tight,
            flex: 3,
            child: Padding(
              padding: EdgeInsets.only(left: 40.0, top: 25.0),
              child: Column(
                children: [
                  Flexible(child: Container(), flex: 1),
                  _restaurantNameContainer,
                  Text('* * * * *', style: TextStyle(fontSize: 70)),
                ],
              ),
            ),
          ),
          _rightSideSection
        ],
      ),
    );

    Widget _bottomSection = Container(
        height: 70,
        width: Size.infinite.width,
        child: Center(
          child: Text('Pubs & Restaurants',
              style: TextStyle(color: Colors.white, fontSize: 40)),
        ),
        color: Colors.purple);

    Widget unfittedCard = Card(
        child: SizedBox(
      width: 500,
      height: 300,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [_topSection, _bottomSection],
      ),
    ));
    return Container(
        width: this.width,
        child: FittedBox(fit: BoxFit.fitWidth, child: unfittedCard));
  }
}

笔记：

  • 注意 flexFit（紧或松）属性：https ://api.flutter.dev/flutter/widgets/Flexible/fit.html
  • 您可以使用所有的弹性定义固定比率，或者您可以将弹性与容器/大小盒混合使用你有什么
  • 包 auto_size_text 非常适合这种情况。（添加auto_size_text: ^2.1.0到您的依赖项）
  • 注意盒子约束。我需要它们使标题自动调整大小的文本能够变高，而无需坐在大容器中。
  • 合身的盒子真的很方便，并且在颤动中非常容易缩放。
于 2021-05-12T20:41:59.367 回答