使 Flutter 容器响应式

Question

我正在尝试制作一个应用程序，并且在堆栈小部件下使用了容器和列小部件，但容器的宽度和列小部件的定位小部件没有根据屏幕尺寸进行更新。

截图：

请检查下面给出的演示代码并重新编辑代码。谢谢你。

代码

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

  @override
  Widget build(BuildContext context) {
    
    var width = MediaQuery.of(context).size.width;
    return Center(
      child: Container(
          height: 135,
          width: width,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.yellow),
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Stack(
            children: <Widget>[
              Container(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Stack(
                          children: <Widget>[
                            Image.network(
                              'https://images3.alphacoders.com/823/82317.jpg',
                              fit: BoxFit.cover,
                              height: 120,
                              width: 120,
                            ),
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0, 15, 5, 0),
                      child: Container(
                        width: width * 0.6,
                        height: 110,
                        child: const Text(
                          'product.name',
                          textAlign: TextAlign.justify,
                          style: TextStyle(fontSize: 17),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Positioned(
                top: 80,
                left: width * 0.85,
                child: Column(
                  children: const [
                    Text(
                      'Rs200',
                      style:
                          TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      'Rs300',
                      style: TextStyle(
                          decoration: TextDecoration.lineThrough,
                          fontSize: 17,
                          color: Colors.blueGrey),
                    ),
                  ],
                ),
              ),
            ],
          )),
    );
  }
}

Answer 1

首先，您使用了如此多的冗余小部件，这些小部件除了使代码看起来丑陋和复杂之外没有任何作用。我重构了代码，并在满足您的要求的同时使用了最少数量的小部件：

操作演示：https://dartpad.dev/?null_safety=true&id=75d503fcbe2bdb0e8b37ff21fc284a30

要点链接：https://gist.github.com/omishah/75d503fcbe2bdb0e8b37ff21fc284a30（如果这对你有用，请给星星。:)）

我已经使图像也具有响应性，如果您不想拥有它，可以将其删除。

完整代码：

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

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    return Scaffold(
        body: IntrinsicHeight(
            child: Container(
      margin: EdgeInsets.all(
          8.0), // just to make the contianer stand out, you can remove it

      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.yellow),
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
              fit: BoxFit.cover,
              height:
                  width * 0.25, // 25% of screen width
              width: width * 0.25,
            ),
          ),
          SizedBox(width: 15),
          Expanded(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                Text(
                  'product.name',
                  style: TextStyle(fontSize: 17),
                ),
                Align(
                    alignment: Alignment.centerRight,
                    child: Wrap(direction: Axis.vertical, children: [
                      Text(
                        'Rs200',
                        style: TextStyle(
                            fontSize: 17, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        'Rs300',
                        style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            fontSize: 17,
                            color: Colors.blueGrey),
                      ),
                    ]))
              ])),
        ],
      ),
    )));
  }
}

Answer 2

你应该试试这个：

Container(
        margin: EdgeInsets.all(16.0),
        height: 135,
        width: double.infinity,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.yellow),
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Stack(
          children: <Widget>[
            Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Stack(
                        children: <Widget>[
                          Image.network(
                            'https://images3.alphacoders.com/823/82317.jpg',
                            fit: BoxFit.cover,
                            height: 120,
                            width: 120,
                          ),
                        ],
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(50, 15, 5, 0),
                    child: Container(
                      
                      height: 110,
                      child: const Text(
                        'product.name',
                        textAlign: TextAlign.justify,
                        style: TextStyle(fontSize: 17),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              top: 80,
              right: 20,
              child: Column(
                children: const [
                  Text(
                    'Rs200',
                    style: TextStyle(
                        fontSize: 17, fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'Rs300',
                    style: TextStyle(
                        decoration: TextDecoration.lineThrough,
                        fontSize: 17,
                        color: Colors.blueGrey),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

你的屏幕看起来像这样 -

Answer 3

无需使用任何Stack。我认为您可以使用行和列小部件执行操作，请查看我在下面添加的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
            height: 135,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.yellow),
              color: Colors.white,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Row(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Stack(
                      children: <Widget>[
                        Image.network(
                          'https://images3.alphacoders.com/823/82317.jpg',
                          fit: BoxFit.cover,
                          height: 120,
                          width: 120,
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(0, 15, 5, 0),
                              child: const Text(
                                'asdfnweoriwqer qweroiqwoer qweruqwoer sadfsdf dfsdf ',
                                textAlign: TextAlign.justify,
                                style: TextStyle(fontSize: 17),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: const [
                                Text(
                                  'Rs200',
                                  style: TextStyle(
                                      fontSize: 17,
                                      fontWeight: FontWeight.bold),
                                ),
                                Text(
                                  'Rs300',
                                  style: TextStyle(
                                      decoration: TextDecoration.lineThrough,
                                      fontSize: 17,
                                      color: Colors.blueGrey),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            )),
      ),
    );
  }
}

布局说明：

1. 一行将有两个项目 1) 图像，另一个将是一列。
2. 现在，列将扩展小部件以获得最大宽度。
3. 列子项将有两行小部件，一个产品名称和另一个价格行，其中列作为文本小部件。
4. 我们使用 row 来获取最大宽度。

为了使文本相应地扩展，您必须在行小部件内添加扩展的小部件，以便它根据即将到来的文本进行缩放。

您必须根据需要添加填充物。