flutter - 如何对文本进行排序，使其喜欢左侧的第一行（“abcd”），右侧的（“$ 1000”），而（“prod amount”）在它的下一行？（扑）

Question

    return Scaffold(
            body: GridView.count(
              // Create a grid with 2 columns. If you change the scrollDirection to
              // horizontal, this produces 2 rows.
              crossAxisCount: 2,
              // Generate 100 widgets that display their index in the List.
              children: List.generate(5, (index) {
                return Container(
                    height: MediaQuery.of(context).size.height * 0.3,
                    margin: EdgeInsets.all(5.0),
                    width: double.infinity,
                    child: Stack(
                      children: <Widget>[
                    Image.asset(
                      '$prod_picture'
                    )
                    ,
                    new Positioned(
                      child: new Align(
                          alignment: FractionalOffset.bottomRight,
                          child:Container(
                            height: MediaQuery.of(context).size.height*0.08,
                            color: const Color(0x4D505050),
                            child:   Padding(
                              child: Column(
                                children: <Widget>[
                                  Row(
                                    children: <Widget>[
                                      Expanded(
                                        child: Text("$prod_name"),
                                      ),
                                      Expanded(
                                        child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Text("\$1000"),
                                        ),
                                      )
                                    ],
                                  ),
                                  SizedBox(
                                    height: 5.0,
                                  ),
                                  Align(
                                      alignment: Alignment.centerLeft,
                                      child: Text(
                                        "$prod_amount",
                                      ))
                                ],
                              ),
                              padding: EdgeInsets.all(10.0),

图片 如您所见，我使用了您的代码，但我的文字现在没有出现。如您所见，我使用了您的代码，但我的话现在没有出现。如您所见，我使用了您的代码，但我的话现在没有出现。如您所见，我使用了您的代码，但我的话现在没有出现。

Answer 1

我已将Stack小部件用于彼此的视图对齐，就像您描述的图像一样，请根据需要检查以下解决方案

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }
}

class HomeState extends State<HomeScreen> {


  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.red,
          accentColor: Color(0xFFFEF9EB),
        ),
        home: Scaffold(
            appBar: new AppBar(),
            body: GridView.count(
              // Create a grid with 2 columns. If you change the scrollDirection to
              // horizontal, this produces 2 rows.
              crossAxisCount: 2,
              // Generate 100 widgets that display their index in the List.
              children: List.generate(5, (index) {
                return Container(
                    height: MediaQuery.of(context).size.height * 0.3,
                    margin: EdgeInsets.all(5.0),
                    width: double.infinity,
                    child: Stack(
                      children: <Widget>[

                        CachedNetworkImage(
                          imageUrl: "https://picsum.photos/250?image=9",
                          placeholder: (context, url) => new CircularProgressIndicator(),
                          errorWidget: (context, url, error) => new Icon(Icons.error),
                        )
                        ,
                        new Positioned(
                          child: new Align(
                              alignment: FractionalOffset.bottomRight,
                              child:Container(
                                height: MediaQuery.of(context).size.height*0.08,
                                color: const Color(0x4D505050),
                                child:   Padding(
                                  child: Column(
                                    children: <Widget>[
                                      Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Text("ABCD"),
                                          ),
                                          Expanded(
                                            child: Align(
                                              alignment: Alignment.centerRight,
                                              child: Text("1000"),
                                            ),
                                          )
                                        ],
                                      ),
                                      SizedBox(
                                        height: 5.0,
                                      ),
                                      Align(
                                          alignment: Alignment.centerLeft,
                                          child: Text(
                                            "Product Value",
                                          ))
                                    ],
                                  ),
                                  padding: EdgeInsets.all(10.0),
                                ),
                              )
                          ),
                        )

                      ],
                    ),
                );
              }),
            )));
  }
}

上述程序的输出如下