Question

我想在卡片中同时添加图像和文本，但是我无法这样做。我认为这里将使用一行，但无法实现它。我是Flutter和应用程序开发的新手，所以遇到了一些麻烦。任何帮助都非常感谢。卡也位于GridView中（不在ListView中）。

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'lists.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
  title: 'Just Another App',
  home: Home(),
  routes: {
    "/webview": (_) => WebviewScaffold(
          withJavascript: true,
          withLocalStorage: true,
          url: 'https://www.google.com/',
          appBar: AppBar(
            title: Text('Browser'),
          ),
        ),
  },
  theme: ThemeData(primaryColor: Colors.black),
);
}
}

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final webView = FlutterWebviewPlugin();

  @override
  void initState() {
   super.initState();
   webView.close();
 } 
  @override
  Widget build(BuildContext context) {
    var gridView = GridView.builder(
        itemCount: 15,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            child: Card(
              elevation: 10,
              child: Padding(
               padding: const EdgeInsets.all(35),
               child: Container(
                 // child: SizedBox(child: Text('yashjha'),),
                 // child: Image.asset('lib/images/${images[index]}'),
                 decoration: BoxDecoration(
                   image: DecorationImage(
                     image: AssetImage('lib/images/${images[index]}'),
                     fit: BoxFit.fitWidth,
                      alignment: Alignment.topCenter,
                   ),
                 ),
               ),
             ),
            ),
            onTap: () {
              setState(() {
                Navigator.of(context).pushNamed('/webview');
              });
            },
          );
        });

return Scaffold(
  appBar: AppBar(
    title: Text('Just Another App'),
  ),
  body: Container(
    child: gridView,
    padding: EdgeInsets.all(12),
  ),
);
  }
[GridViewApp Screenshot][1]}

这是我在Scaffold的“ body”中使用的变量。

Answer 1

如果要并排放置图像和文本，请添加“行”小部件：

child: Row(
     children: <Widget>[
         DecorationImage(...),
         Text(...),
     ],
)

您还可以设置mainAxisAlignment和crossAxisAlignment以确保正确放置窗口小部件

Answer 2

只需将“容器”包装到“行小部件”中，然后向其中添加文本即可。

Row(
          children: <Widget>[
            Text("add text here"),
            Container(
              // child: SizedBox(child: Text('yashjha'),),
              // child: Image.asset('lib/images/${images[index]}'),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('lib/images/${images[index]}'),
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topCenter,
                ),
              ),
            ),
          ],
        ),

Flutter卡中的文字和图像

2 个答案: