我有一个专栏,需要显示一个新闻类别,新闻标题,并在底部应该添加作者的名字.

这是我现在所拥有的:

enter image description here

这就是我想要的:

enter image description here

我需要在底部推送作者信息,这是我的小工具:

import 'package:flutter/material.dart';

class NewsCardHorizontal extends StatelessWidget {
  final String title;
  final String image;
  final String category;

  const NewsCardHorizontal({
    super.key,
    required this.title,
    required this.category,
    required this.image,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _image(image),
        const SizedBox(width: 8),
        Expanded(
          flex: 1,
          child: SizedBox(
            // width: 150, // Imposta una larghezza fissa
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  flex: 3,
                  child: Column(
                    children: [
                      Text(category),
                      const SizedBox(height: 8),
                      _newsTitle(title),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    children: [
                      CircleAvatar(
                        child: Text('A'),
                        radius: 10,
                      ),
                      SizedBox(width: 5),
                      Text('Dolores'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _newsTitle(String title) {
    return Flexible(
      fit: FlexFit.loose,
      child: Text(
        title,
        maxLines: 3,
        style: const TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 18,
        ),
      ),
    );
  }

  Widget _image(String image) {
    return SizedBox(
      width: 150,
      height: 150,
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Image.network(
          image,
          fit: BoxFit.fitHeight,
        ),
      ),
    );
  }
}

我也曾try 删除Expanded,并在中间添加Spacer,但出现错误.我如何才能将最新的一行推入列的底部?

推荐答案

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Example(),
      ),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.circular(10),
            ),
            height: 120,
            width: 120,
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text('Living'),
                const SizedBox(height: 8),
                const Text(
                  'Duere fuga ab dolores? \nfdsfdsfds',
                  maxLines: 3,
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 18,
                  ),
                ),
                Spacer(),
                Row(
                  children: [
                    CircleAvatar(
                      child: Text('A'),
                      radius: 10,
                    ),
                    SizedBox(width: 5),
                    Text('Dolores'),
                  ],
                ),
                const SizedBox(height: 8),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Flutter相关问答推荐

如何在Flutter 屏幕中添加箭头形状

Riverpod生成器和生成util类

我可以在iOS设备上使用Ffltter实现Google Pay按钮吗?

Flutter Riverpod,将默认的BTC值改写为我的新状态

确保通过在CheckIfFavoriteMovieEvent((event,emit){...})上注册处理程序误差

StateNotifer正在riverpod中提供初始状态值(bool)

带有命名参数的回调函数不起作用

在 flutter 的列中使用 Expanded 时出现渲染 Flex 错误

点击按钮后重新启动定时器

用户文档 ID 与 Firestore 中的用户 ID 相同

如何正确地将 PageView 设置为 AppBar 的标题?

Flutter 自定义对齐

你如何在 Flutter 中组合两个数组?

在 Dart 中使用隔离时访问外部范围内的变量

Getx Flutter 在更新值时抛出空错误

为什么这个循环只发生一次?Flutter /dart

既然我们已经有了 Flutter 的内置 setState,为什么还要在 Flutter 中使用 BloC 或 Provider?

阴影效果只出现在一张卡片的左边 在Flutter 中?

在 Flutter 应用程序中全局使用 assets 文件夹

如何在Flutter 中专注于列表视图中最新添加的项目