Flutter 레이아웃의 그림 원각 갤러리
텍스트 링크
자습서 추천
효과도
코드
import 'package:flutter/material.dart';
// Uncomment lines 7 and 10 to view the visual layout at runtime.
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
void main() {
debugPaintSizeEnabled = true; // 1
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@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> {
@override
Widget build(BuildContext context) {
var container = Container(
decoration: BoxDecoration(
color: Colors.black26,
),
child: Column( // 2
children: [
Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration( // 3
border: Border.all(width: 5.0, color: Colors.black),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/timg.jpeg'),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(0.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/timg.jpeg'),
),
),
],
),
Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.red),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: Image.asset('images/timg.jpeg'),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(16.0),
child: Image.asset('images/timg.jpeg'),
),
),
],
),
],
),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: container,
),
);
}
}
분석하다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.