Question

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: new Scaffold(
          body: new Column(
            children: <Widget>[
              Card(
                  child: Image(
                    image: new AssetImage('assets/cardbg.png'),
                    fit: BoxFit.cover,
                  ),
                color: Colors.white,
                semanticContainer: true,
                clipBehavior: Clip.antiAliasWithSaveLayer,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                elevation: 5,
                margin: EdgeInsets.all(5),
              ),
              new Text('hjsdgshagdjadh'),
            ],
          ),
        ));

我正在使用Image和textview创建carview。我想在卡片的左侧显示文本，在卡片的右侧创建圆形图像，我想为卡片设置背景图像。在卡片下面，我想要使用Listview文本和复选框。如果选中任何复选框，则选中的项目应显示在cardview的右侧。在android中，我做了所有这些事情，但我不知道如何在flutter中实现相同的功能。

Answer 1

您似乎需要屏幕布局方面的帮助。到目前为止，您是否尝试过任何方法，是否遇到任何特定问题？我建议通过docs来学习有关在Flutter中使用布局的更多信息。

对于您的用例，以下是有关我们如何在屏幕上布置小部件的一般视图。为了简单起见，本概述中将不包含用于对齐和填充的容器。

Column
- Card
  - Column
    - Row
      - Column
        - Text
        - Text
      - Image
    - Text
- ListView
  - Card
    - Row
      - Text
      - Checkbox

如果选中任何复选框，则所选项目应显示在卡片视图的右侧。

在勾选复选框时，我不确定所需的输出是什么。如果您可以提供更多详细信息，我也许可以提供一些指导。

在此示例中，复选框中的值存储在HashMap中。您可以根据自己的用例来适当地更改它。

这是您可以使用的示例代码。

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Map<String, bool> checkboxValues = {
    'List CheckBox 1': false,
    'List CheckBox 2': false,
    'List CheckBox 3': false,
    'List CheckBox 4': false,
    'List CheckBox 5': false,
    'List CheckBox 6': false,
    'List CheckBox 7': false,
    'List CheckBox 8': false,
    'List CheckBox 9': false,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: new Column(
        children: <Widget>[
          Card(
            child: Padding(
              padding: const EdgeInsets.all(18.0),
              child: Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        flex: 3,
                        child: Container(
                          alignment: Alignment.topLeft,
                          child: Column(
                            children: [
                              Text('Text 1'),
                              Container(
                                height: 24,
                                width: 0,
                              ),
                              Text('Text 2'),
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Image(
                          height: 60,
                          image: AssetImage('assets/image.png'),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(0, 24, 0, 0),
                    alignment: Alignment.topLeft,
                    child: Text('Text 3'),
                  ),
                ],
              ),
            ),
            color: Colors.white,
            semanticContainer: true,
            clipBehavior: Clip.antiAliasWithSaveLayer,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            elevation: 5,
            margin: EdgeInsets.all(5),
          ),
          Expanded(
            flex: 3,
            child: ListView(
              children: checkboxValues.keys.map((key) {
                return Card(
                  child: Container(
                    margin: EdgeInsets.all(18),
                    child: Row(
                      children: [
                        Text(key),
                        Checkbox(
                          onChanged: (bool value) {
                            setState(() {
                              // store new val of key on HashMap
                              checkboxValues[key] = value;
                            });
                          },
                          value: checkboxValues[key],
                        ),
                      ],
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  elevation: 5,
                  margin: EdgeInsets.all(5),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

应用运行时的外观

颤动在卡内创建图像和文本

1 个答案: